geolba/tethys.backend
geolba/tethys.backend
2
0
Fork 2
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

- daraggable crators and contributors inside Pages/Submitter/Dataset/Create.Vue
All checks were successful
CI Pipeline / japa-tests (push) Successful in 59s
Details

Browse source 
- typescript and prettier updates
- FileUpload component with dark mode and dragable uploads
- comment FontFamily in tailwind.config.js
This commit is contained in:
Kaimbacher 2023-06-16 16:44:28 +02:00
parent f76a92da2c
commit c4f4eff0d9
18 changed files with 1138 additions and 951 deletions
Download patch file Download diff file Expand all files Collapse all files

94
resources/js/Components/TablePersons.vue
View file

@ -11,6 +11,7 @@ import BaseButton from '@/Components/BaseButton.vue';
import UserAvatar from '@/Components/UserAvatar.vue';
// import Person from 'App/Models/Person';
import { Person } from '@/Stores/main';
import Draggable from 'vuedraggable';
const props = defineProps({
checkable: Boolean,
@ -22,7 +23,20 @@ const props = defineProps({
const styleService = StyleService();
// const mainService = MainService();
const items = computed(() => props.persons);
// const items = computed(() => props.persons);
const items = computed({
get() {
return props.persons;
},
// setter
set(value) {
// Note: we are using destructuring assignment syntax here.
props.persons.length = 0;
props.persons.push(...value);
},
});
// const isModalActive = ref(false);
// const isModalDangerActive = ref(false);
@ -30,7 +44,18 @@ 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 itemsPaginated = computed({
get() {
return items.value.slice(perPage.value * currentPage.value, perPage.value * (currentPage.value + 1));
},
// setter
set(value) {
// Note: we are using destructuring assignment syntax here.
props.persons.length = 0;
props.persons.push(...value);
},
});
const numPages = computed(() => Math.ceil(items.value.length / perPage.value));
@ -93,6 +118,7 @@ const removeAuthor = (key) => {
<thead>
<tr>
<!-- <th v-if="checkable" /> -->
<th scope="col">ID</th>
<th class="hidden lg:table-cell"></th>
<th>Name</th>
<th>Email</th>
@ -102,44 +128,50 @@ const removeAuthor = (key) => {
<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">
<!-- <tbody> -->
<!-- <tr v-for="(client, index) in itemsPaginated" :key="client.id"> -->
<draggable id="galliwasery" tag="tbody" v-model="items" item-key="id">
<template #item="{ index, element }">
<tr>
<td scope="row">{{ index + 1 }}</td>
<!-- <TableCheckboxCell v-if="checkable" @checked="checked($event, client)" /> -->
<td class="border-b-0 lg:w-6 before:hidden hidden lg:table-cell">
<UserAvatar :username="element.name" class="w-24 h-24 mx-auto lg:w-6 lg:h-6" />
</td>
<td data-label="Name">
{{ element.name }}
</td>
<td data-label="Email">
{{ element.email }}
</td>
<!-- <td data-label="Name Type">
{{ client.name_type }}
</td> -->
<!-- <td data-label="Orcid">
<!-- <td data-label="Orcid">
{{ client.identifier_orcid }}
</td> -->
<!-- <td data-label="Progress" class="lg:w-32">
<!-- <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>
<td data-label="Created" class="lg:w-1 whitespace-nowrap">
<small class="text-gray-500 dark:text-slate-400" :title="element.created_at">{{ element.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>
</template>
</draggable>
<!-- </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>
<div class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
<!-- <BaseLevel>
<BaseButtons>
<BaseButton
v-for="page in pagesList"
@ -152,6 +184,6 @@ const removeAuthor = (key) => {
/>
</BaseButtons>
<small>Page {{ currentPageHuman }} of {{ numPages }}</small>
</BaseLevel>
</BaseLevel> -->
</div>
</template>