Page: Refactor pages list in home

assets/vue/components/page/PageCard.vue

@@ -1,54 +1,44 @@
 <template>
-  <q-card
+  <BaseCard plain>
-    v-if="page"
+    <template #header>
-    elevation="4"
+      <div class="-mb-2 flex items-center justify-between gap-2 bg-gray-15 px-4 py-2">
-  >
+        <h6 v-text="page.title" />
-    <q-card-section>
+        <BaseButton
-      <div class="text-h6">
+          v-if="isAdmin"
-        {{ page.title }}
+          icon="edit"
-      </div>
-    </q-card-section>
-
-    <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"
+          type="black"
           @click="handleClick(page)"
         />
-    </q-card-actions>
+      </div>
-  </q-card>
     </template>
 
-<script>
+    <div v-html="page.content" />
+  </BaseCard>
+</template>
 
-import {mapGetters} from "vuex";
+<script setup>
-import {useRouter} from "vue-router";
+import { useRouter } from "vue-router"
-import {reactive, toRefs} from "vue";
+import { useSecurityStore } from "../../store/securityStore"
+import { storeToRefs } from "pinia"
+import BaseCard from "../basecomponents/BaseCard.vue"
+import BaseButton from "../basecomponents/BaseButton.vue"
 
-export default {
+const router = useRouter()
-  name: 'PageCard',
+const securityStore = useSecurityStore()
-  props: {
+const { isAdmin } = storeToRefs(securityStore)
-    page: Object,
+
-  },
+defineProps({
-  setup() {
+  page: {
-    const router = useRouter();
+    type: Object,
-    const state = reactive({
+    required: true,
-      handleClick: function (page) {
-        router.push({name: 'PageUpdate', query: {id: page['@id']}});
-      },
-    });
-    return toRefs(state);
   },
-  computed: {
+})
-    ...mapGetters({
+
-      'isAdmin': 'security/isAdmin',
+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"
+    v-if="pages.length"
-    :key="page.id"
+    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"
+
+const { locale } = useI18n()
+
+const pages = ref([])
 
-defineProps({
+pageService
-  pages: {
+  .findAll({
-    type: Array,
+    params : {
-    default () {
+      "category.title": "home",
-      return [];
+      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 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 />
-    <PageCardList :pages="pages" />
   </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>