Migrate ClientList, WalkRating and Changelog and ContentCollapse to v…

…uetify 2 #248

web/assets/js/api/client.js

@@ -0,0 +1,37 @@
+'use strict';
+import apiClient from '../api';
+import dayjs from 'dayjs';
+
+const updateFilterParams = function (params) {
+    let sort = '';
+    if (params.sortBy) {
+        sort = `&order[${params.sortBy}]=${params.sortDesc ? 'desc' : 'asc'}`;
+    }
+    if (typeof params?.filter !== "object") {
+        return sort;
+    }
+    for (const [key, value] of Object.entries(params.filter)) {
+        if (value === null || value === undefined || '' === value) {
+        }  else if (Array.isArray(value)) {
+            value.forEach((iri) => {
+                sort += `&${key}[]=${iri}`;
+            });
+        } else if ('startTime' === key) {
+            if (value.startDate && value.endDate) {
+                sort += `&${key}[after]=${dayjs(value.startDate).startOf('day').toISOString()}&${key}[before]=${dayjs(value.endDate).endOf('day').toISOString()}`;
+            }
+        } else {
+            sort += `&${key}=${value}`;
+        }
+    }
+
+    return sort;
+};
+
+export default {
+    find(params) {
+        let sort = updateFilterParams(params);
+
+        return apiClient.get(`/api/clients?page=${params.page}&itemsPerPage=${params.itemsPerPage}` + sort);
+    },
+};

web/assets/js/components/Changelog.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <content-collapse
+        <ContentCollapse
             title="Changelog - Was ist neu bei Swapp?"
             collapse-key="changelog-swapp"
             is-visible-by-default
@@ -10,13 +10,11 @@
                     <b-list-group-item
                         class="d-flex justify-content-between align-items-center"
                         variant="dark"
+                        :key="item.header"
                     >
                         <div>
                             <span class="font-weight-bold">{{ item.header }}</span>
-                            <b-badge
-                                v-if="hasItemNewBadge(item.header)"
-                                variant="primary"
-                            >
+                            <b-badge v-if="hasItemNewBadge(item.header)" variant="primary">
                                 Neu
                             </b-badge>
                         </div>
@@ -27,27 +25,23 @@
                             :title="item.avatarTitle ?? ''"
                         />
                     </b-list-group-item>
-                    <b-list-group-item>
+                    <b-list-group-item
+                        :key="`${item.header}2`"
+                    >
                         <ul class="pl-3 mb-0">
-                            <li
-                                v-for="entry in item.entries"
-                            >
+                            <li v-for="(entry,entryKey) in item.entries" :key="`${item.header}-${entryKey}`">
                                 <template v-if="Array.isArray(entry.text)">
-                                    <span
-                                        v-html="entry.text[0]"
-                                    />
+                                    <span v-html="entry.text[0]" />
                                     <ul>
                                         <li
                                             v-for="(textItem, i) in entry.text"
                                             v-if="i !== 0"
+                                            :key="i"
                                             v-html="textItem"
                                         />
                                     </ul>
                                 </template>
-                                <span
-                                    v-else
-                                    v-html="entry.text"
-                                />
+                                <span v-else v-html="entry.text" />
                                 <silent-box
                                     v-if="entry.gallery && entry.gallery.length"
                                     :gallery="entry.gallery"
@@ -58,47 +52,49 @@
                     </b-list-group-item>
                 </template>
             </b-list-group>
-        </content-collapse>
+        </ContentCollapse>
     </div>
 </template>
 
-<script>
-'use strict';
+<script lang="ts">
+import { ref, computed, onMounted } from 'vue';
 import ContentCollapse from './ContentCollapse.vue';
-import dayjs from 'dayjs';
+import dayjs, {Dayjs} from 'dayjs';
 import { useChangelogStore } from '../stores/changelog';
 
 export default {
     name: 'Changelog',
     components: {
         ContentCollapse,
     },
-    data: () => {
+    setup() {
+        const changelogStore = useChangelogStore();
+        const lastVisitedAt = ref<boolean | Dayjs>(false );
+
+        onMounted(() => {
+            lastVisitedAt.value = changelogStore.getLastVisitedAt;
+            changelogStore.updateLastVisitedAt(dayjs());
+        });
+
+        const items = computed(() => changelogStore.getChangelogs);
+
+        const hasItemNewBadge = (header: string): boolean => {
+            const itemTime = dayjs(header.split(' ')[0], ['DD.MM.YYYY', 'YYYY']);
+            if (!lastVisitedAt.value) {
+                return false;
+            }
+            return itemTime.isAfter(lastVisitedAt.value);
+        };
+
         return {
-            changelogStore: useChangelogStore(),
-            lastVisitedAt: false,
+            items,
+            hasItemNewBadge,
         };
     },
-    computed: {
-        items() {
-            return this.changelogStore.getChangelogs;
-        },
-    },
-    created() {
-        this.lastVisitedAt = this.changelogStore.getLastVisitedAt;
-        this.changelogStore.updateLastVisitedAt(dayjs());
-    },
-    methods: {
-        hasItemNewBadge(header) {
-            const itemTime = dayjs(header.split(' ')[0], ["DD.MM.YYYY", "YYYY"]);
-
-            return itemTime.isAfter(this.lastVisitedAt);
-        },
-    }
 };
 </script>
 
-<style>
+<style scoped>
 .silentbox-item img {
     border-radius: 0.5rem;
     margin-right: 0.5rem;

web/assets/js/components/Clients/ClientForm.vue

@@ -232,19 +232,30 @@ export default {
             return this.clientStore.getErrors.create;
         },
     },
-    async created() {
-        this.client.name = this.initialClient.name;
-        this.client.email = this.initialClient.email;
-        this.client.description = this.initialClient.description || '';
-        if (this.initialClient.ratingImageSrc) {
-            const response = await axios.get(this.initialClient.ratingImageSrc, { responseType: 'blob' });
-            if (response.status) {
-                this.client.ratingImageFileData = await this.readFile(response.data);
-                this.client.ratingImageFileName = this.initialClient.ratingImageName;
-            }
+    mounted() {
+        this.setInitialValues();
+    },
+    watch: {
+        initialClient() {
+            this.setInitialValues();
         }
     },
     methods: {
+        async setInitialValues() {
+            this.client.name = this.initialClient.name;
+            this.client.email = this.initialClient.email;
+            this.client.description = this.initialClient.description || '';
+            if (this.initialClient.ratingImageSrc) {
+                const response = await axios.get(this.initialClient.ratingImageSrc, { responseType: 'blob' });
+                if (response.status) {
+                    this.client.ratingImageFileData = await this.readFile(response.data);
+                    this.client.ratingImageFileName = this.initialClient.ratingImageName;
+                }
+            } else {
+                this.client.ratingImageFileData = null;
+                this.client.ratingImageFileName = null;
+            }
+        },
         async handleSubmit() {
             this.$emit('submit', this.client);
         },