- add validator for checking languages of translated titles and description

- add notification messages via notiwind.ts
- add Project.ts
- add new component TabelPersons.vue
- add additional routes
- npm updates

resources/js/Components/TablePersons.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+// import { MainService } from '@/Stores/main';
+import { StyleService } from '@/Stores/style';
+import { mdiTrashCan } from '@mdi/js';
+// import CardBoxModal from '@/Components/CardBoxModal.vue';
+// import TableCheckboxCell from '@/Components/TableCheckboxCell.vue';
+import BaseLevel from '@/Components/BaseLevel.vue';
+import BaseButtons from '@/Components/BaseButtons.vue';
+import BaseButton from '@/Components/BaseButton.vue';
+import UserAvatar from '@/Components/UserAvatar.vue';
+// import Person from 'App/Models/Person';
+import { Person } from '@/Stores/main';
+
+const props = defineProps({
+    checkable: Boolean,
+    persons: {
+        type: Array<Person>,
+        default: () => [],
+    },
+});
+
+const styleService = StyleService();
+// const mainService = MainService();
+const items = computed(() => props.persons);
+
+// const isModalActive = ref(false);
+// const isModalDangerActive = ref(false);
+const perPage = ref(5);
+const currentPage = ref(0);
+// const checkedRows = ref([]);
+
+const itemsPaginated = computed(() => items.value.slice(perPage.value * currentPage.value, perPage.value * (currentPage.value + 1)));
+
+const numPages = computed(() => Math.ceil(items.value.length / perPage.value));
+
+const currentPageHuman = computed(() => currentPage.value + 1);
+
+const pagesList = computed(() => {
+    const pagesList: Array<number> = [];
+
+    for (let i = 0; i < numPages.value; i++) {
+        pagesList.push(i);
+    }
+
+    return pagesList;
+});
+
+const removeAuthor = (key) => {
+    items.value.splice(key, 1);
+};
+
+// const remove = (arr, cb) => {
+// 	const newArr = [];
+
+// 	arr.forEach((item) => {
+// 		if (!cb(item)) {
+// 			newArr.push(item);
+// 		}
+// 	});
+
+// 	return newArr;
+// };
+
+// const checked = (isChecked, client) => {
+// 	if (isChecked) {
+// 		checkedRows.value.push(client);
+// 	} else {
+// 		checkedRows.value = remove(checkedRows.value, (row) => row.id === client.id);
+// 	}
+// };
+</script>
+
+<template>
+    <!-- <CardBoxModal v-model="isModalActive" title="Sample modal">
+		<p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
+		<p>This is sample modal</p>
+	</CardBoxModal>
+
+	<CardBoxModal v-model="isModalDangerActive" large-title="Please confirm" button="danger" has-cancel>
+		<p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
+		<p>This is sample modal</p>
+	</CardBoxModal> -->
+
+    <!-- <div v-if="checkedRows.length" class="p-3 bg-gray-100/50 dark:bg-slate-800">
+		<span v-for="checkedRow in checkedRows" :key="checkedRow.id"
+			class="inline-block px-2 py-1 rounded-sm mr-2 text-sm bg-gray-100 dark:bg-slate-700">
+			{{ checkedRow.name }}
+		</span>
+	</div> -->
+
+    <table>
+        <thead>
+            <tr>
+                <!-- <th v-if="checkable" /> -->
+                <th class="hidden lg:table-cell"></th>
+                <th>Name</th>
+                <th>Email</th>
+                <!-- <th>Name Type</th> -->
+                <!-- <th>Progress</th> -->
+                <th>Created</th>
+                <th />
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(client, index) in itemsPaginated" :key="client.id">
+                <!-- <TableCheckboxCell v-if="checkable" @checked="checked($event, client)" /> -->
+                <td class="border-b-0 lg:w-6 before:hidden hidden lg:table-cell">
+                    <UserAvatar :username="client.name" class="w-24 h-24 mx-auto lg:w-6 lg:h-6" />
+                </td>
+                <td data-label="Name">
+                    {{ client.name }}
+                </td>
+                <td data-label="Email">
+                    {{ client.email }}
+                </td>
+                <!-- <td data-label="Name Type">
+                    {{ client.name_type }}
+                </td> -->
+                <!-- <td data-label="Orcid">
+                    {{ client.identifier_orcid }}
+                </td> -->
+                <!-- <td data-label="Progress" class="lg:w-32">
+					<progress class="flex w-2/5 self-center lg:w-full" max="100" v-bind:value="client.progress">
+						{{ client.progress }}
+					</progress>
+				</td> -->
+                <td data-label="Created" class="lg:w-1 whitespace-nowrap">
+                    <small class="text-gray-500 dark:text-slate-400" :title="client.created_at">{{ client.created_at }}</small>
+                </td>
+                <td class="before:hidden lg:w-1 whitespace-nowrap">
+                    <BaseButtons type="justify-start lg:justify-end" no-wrap>
+                        <!-- <BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" /> -->
+                        <BaseButton color="danger" :icon="mdiTrashCan" small @click.prevent="removeAuthor(index)" />
+                    </BaseButtons>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <!-- :class="[ pagesList.length > 1 ? 'block' : 'hidden']" -->
+    <div class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800" >
+        <BaseLevel>
+            <BaseButtons>
+                <BaseButton
+                    v-for="page in pagesList"
+                    :key="page"
+                    :active="page === currentPage"
+                    :label="page + 1"
+                    small
+                    :outline="styleService.darkMode"
+                    @click="currentPage = page"
+                />
+            </BaseButtons>
+            <small>Page {{ currentPageHuman }} of {{ numPages }}</small>
+        </BaseLevel>
+    </div>
+</template>