Merge pull request 'News view refactor' (!137) from wbuezas/hedera-web-mindshore:feature/news-view into beta

Reviewed-on: #137
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>

src/components/common/FormModel.vue

@@ -69,6 +69,10 @@ const props = defineProps({
     filter: {
         type: Object,
         default: null
+    },
+    dataRequired: {
+        type: Object,
+        default: () => {}
     }
 });
 
@@ -122,9 +126,10 @@ onMounted(async () => {
 
 async function fetch() {
     try {
-        let { data } = await api.get(props.url, {
-            params: { filter: JSON.stringify(props.filter) }
-        });
+        const params = props.filter
+            ? { filter: JSON.stringify(props.filter) }
+            : {};
+        let { data } = await api.get(props.url, { params });
         if (Array.isArray(data)) data = data[0] ?? {};
         formData.value = { ...data };
         emit('onDataFetched', formData.value);
@@ -144,9 +149,10 @@ async function save() {
 
     isLoading.value = true;
     try {
-        const body = props.mapper
+        let body = props.mapper
             ? props.mapper(formData.value, originalData.value)
             : formData.value;
+        body = { ...body, ...props.dataRequired };
         const method = props.urlCreate ? 'post' : 'patch';
         const url = props.urlCreate || props.urlUpdate || props.url;
 

src/pages/Admin/NewsDetails.vue

@@ -7,19 +7,21 @@ import VnImg from 'src/components/ui/VnImg.vue';
 import VnForm from 'src/components/common/VnForm.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import FormModel from 'src/components/common/FormModel.vue';
 
 import { useAppStore } from 'stores/app';
+import { useUserStore } from 'stores/user';
 import { storeToRefs } from 'pinia';
 
-const jApi = inject('jApi');
+const api = inject('api');
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 const appStore = useAppStore();
+const userStore = useUserStore();
 const { isHeaderMounted } = storeToRefs(appStore);
 
 const newsTags = ref([]);
-const pks = computed(() => ({ id: route.params.id }));
 const isEditMode = !!route.params.id;
 const formData = ref(
     !route.params.id
@@ -32,22 +34,25 @@ const formData = ref(
         : undefined
 );
 
-const fetchNewDataSql = computed(() => {
+const initialFetchUrl = computed(() => {
     if (!route.params.id) return undefined;
-    return {
-        query: `
-        SELECT id, title, text, tag, priority, image
-        FROM news WHERE id = #id`,
-        params: { id: route.params.id }
-    };
+    return `news/${route.params.id}`;
+});
+
+const urlUpdate = computed(() => {
+    if (!route.params.id) return undefined;
+    return `news/${route.params.id}`;
+});
+
+const urlCreate = computed(() => {
+    if (route.params.id) return undefined;
+    return 'news';
 });
 
 const getNewsTag = async () => {
     try {
-        newsTags.value = await jApi.query(
-            `SELECT name, description FROM newsTag
-            ORDER BY description`
-        );
+        const { data } = await api.get('newsTags');
+        newsTags.value = data;
     } catch (error) {
         console.error('Error getting newsTag:', error);
     }
@@ -73,19 +78,14 @@ onMounted(async () => {
                 <QTooltip>{{ t('back') }}</QTooltip>
             </QBtn>
         </Teleport>
-        <VnForm
-            ref="vnFormRef"
-            :fetch-form-data-sql="fetchNewDataSql"
+        <FormModel
             :form-initial-data="formData"
-            :create-model-default="{
-                field: 'userFk',
-                value: 'account.myUser_getId()'
-            }"
-            :pks="pks"
-            :is-edit-mode="isEditMode"
-            table="news"
-            schema="hedera"
-            separation-between-inputs="lg"
+            :url="initialFetchUrl"
+            :auto-load="isEditMode"
+            :url-create="urlCreate"
+            :url-update="urlUpdate"
+            :data-required="{ userFk: userStore.userId }"
+            :show-bottom-actions="false"
             @on-data-saved="goBack()"
         >
             <template #form="{ data }">
@@ -215,7 +215,7 @@ onMounted(async () => {
                     }"
                 />
             </template>
-        </VnForm>
+        </FormModel>
     </QPage>
 </template>
 

src/pages/Admin/NewsView.vue

@@ -5,47 +5,31 @@ import { useI18n } from 'vue-i18n';
 import CardList from 'src/components/ui/CardList.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
 import VnList from 'src/components/ui/VnList.vue';
+import FetchData from 'src/components/common/FetchData.vue';
 
 import { useAppStore } from 'stores/app';
 import { storeToRefs } from 'pinia';
 import { useVnConfirm } from 'src/composables/useVnConfirm.js';
 import useNotify from 'src/composables/useNotify.js';
 
-const jApi = inject('jApi');
+const api = inject('api');
 const { t } = useI18n();
 const appStore = useAppStore();
 const { openConfirmationModal } = useVnConfirm();
 const { isHeaderMounted } = storeToRefs(appStore);
 const { notify } = useNotify();
 
-const loading = ref(false);
+const loading = ref(true);
 const news = ref([]);
 
-const getNews = async () => {
-    try {
-        loading.value = true;
-        news.value = await jApi.query(
-            `SELECT n.id, u.nickname, n.priority, n.image, n.title
-            FROM news n
-            JOIN account.user u ON u.id = n.userFk
-            ORDER BY priority, n.created DESC`
-        );
-        loading.value = false;
-    } catch (error) {
-        console.error('Error getting news:', error);
-    }
+const onFetch = data => {
+    news.value = data;
+    loading.value = false;
 };
 
 const deleteNew = async (id, index) => {
     try {
-        await jApi.execQuery(
-            `START TRANSACTION;
-            DELETE FROM hedera.news WHERE ((id = #id));
-            COMMIT`,
-            {
-                id
-            }
-        );
+        await api.delete(`news/${id}`);
         news.value.splice(index, 1);
         notify(t('dataSaved'), 'positive');
     } catch (error) {
@@ -57,6 +41,7 @@ onMounted(async () => getNews());
 </script>
 
 <template>
+    <FetchData ref="fetchNewsRef" url="news" auto-load @on-fetch="onFetch" />
     <Teleport v-if="isHeaderMounted" to="#actions">
         <QBtn
             :label="t('addNew')"

src/stores/user.js

@@ -296,6 +296,8 @@ export const useUserStore = defineStore('user', () => {
         tokenConfig.value = null;
     };
 
+    const userId = computed(() => user.value?.id);
+
     watch(
         [mainUser, supplantedUser],
         () => (user.value = supplantedUser.value || mainUser.value),
@@ -336,6 +338,7 @@ export const useUserStore = defineStore('user', () => {
         updateUserLang,
         init,
         $reset,
-        onLogin
+        onLogin,
+        userId
     };
 });