多维表格
 
 
 
 
 
 

130 lines
4.7 KiB

<script lang="ts" setup>
import type { ProjectType } from 'nocodb-sdk'
import { navigateTo } from '#app'
import { useColors } from '#imports'
import MdiMenuDown from '~icons/mdi/menu-down'
import MdiDeleteOutline from '~icons/mdi/delete-outline'
import MdiPlus from '~icons/mdi/plus'
import MdiDatabaseOutline from '~icons/mdi/database-outline'
import MdiEditOutline from '~icons/mdi/edit-outline'
interface Props {
projects?: ProjectType[]
}
const { projects = [] } = defineProps<Props>()
const emit = defineEmits(['delete-project'])
const { $e } = useNuxtApp()
const { getColorByIndex } = useColors(true)
const openProject = async (project: ProjectType) => {
await navigateTo(`/nc/${project.id}`)
$e('a:project:open', { count: projects.length })
}
const formatTitle = (title: string) =>
title
.split(' ')
.map((w) => w[0])
.slice(0, 2)
.join('')
</script>
<template>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 3xl:grid-cols-8 gap-6 md:(gap-y-16)">
<div class="group flex flex-col items-center gap-2">
<v-menu>
<template #activator="{ props }">
<div
class="thumbnail hover:(after:!opacity-100 shadow-lg to-primary/50)"
:style="{ '--thumbnail-color': '#1348ba' }"
@click="props.onClick"
>
<MdiPlus />
</div>
<div class="prose-lg font-semibold">
{{ $t('title.newProj') }}
</div>
</template>
<v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
<div
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
@click="navigateTo('/project/create')"
>
<MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
<div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
</div>
<div
class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
@click="navigateTo('/project/create-external')"
>
<MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
<div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
</div>
</v-list>
</v-menu>
</div>
<div v-for="(project, i) of projects" :key="project.id" class="group flex flex-col items-center gap-2">
<div class="thumbnail" :style="{ '--thumbnail-color': getColorByIndex(i) }" @click="openProject(project)">
{{ formatTitle(project.title) }}
<a-dropdown overlay-class-name="nc-dropdown-project-operations" @click.stop>
<MdiMenuDown class="menu-icon" />
<template #overlay>
<a-menu>
<a-menu-item @click.stop="emit('delete-project', project)">
<div class="grid grid-cols-6 cursor-pointer flex items-center p-2">
<MdiDeleteOutline class="col-span-2 mr-1 mt-[1px] text-red text-lg" />
<div class="col-span-4 text-sm xl:text-md">{{ $t('general.delete') }}</div>
</div>
</a-menu-item>
<a-menu-item @click.stop="navigateTo(`/project/${project.id}`)">
<div class="grid grid-cols-6 cursor-pointer flex items-center p-2">
<MdiEditOutline class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
<div class="col-span-4 text-sm xl:text-md">{{ $t('general.edit') }}</div>
</div>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
<div class="prose-lg font-semibold overflow-ellipsis w-full overflow-hidden text-center capitalize">
{{ project.title || 'Untitled' }}
</div>
</div>
</div>
</template>
<style scoped>
.thumbnail {
@apply relative rounded-md opacity-75 font-bold text-white text-[75px] h-[100px] w-full w-[100px] shadow-md cursor-pointer uppercase flex items-center justify-center color-transition hover:(after:opacity-100 shadow-none);
}
.thumbnail::after {
@apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out opacity-75;
background-color: var(--thumbnail-color);
content: '';
z-index: -1;
}
.thumbnail:hover::after {
@apply shadow-2xl transform scale-110;
}
.menu-icon,
.star-icon {
@apply w-auto opacity-0 absolute h-[1.75rem] transition-opacity !duration-200 group-hover:opacity-100;
}
.star-icon {
@apply top-1 right-1 transform hover:(scale-120 text-yellow-300/75) transition-all duration-100 ease;
}
.menu-icon {
@apply bottom-1 right-1 transform hover:(scale-150 text-gray-200) transition-all duration-100 ease;
}
</style>