99 lines
2.0 KiB
Vue
99 lines
2.0 KiB
Vue
<script setup>
|
|
import { ref, watch } from "vue";
|
|
import {
|
|
CircleIcon,
|
|
CheckCircleIcon,
|
|
Edit2Icon,
|
|
TrashIcon,
|
|
AlertCircleIcon,
|
|
CopyIcon,
|
|
UploadCloudIcon,
|
|
} from "lucide-vue-next";
|
|
import { DownloadIcon } from "lucide-vue-next";
|
|
|
|
defineProps(["timetable", "editable", "remote", "selected", "admin"]);
|
|
defineEmits(["click", "edit", "delete", "copy", "export", "upload"]);
|
|
|
|
const deleteConfirm = ref(false);
|
|
|
|
watch(deleteConfirm, (value) => {
|
|
if (value) {
|
|
setTimeout(() => (deleteConfirm.value = false), 2000);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="card">
|
|
<div class="button" @click="$emit('click')">
|
|
<CheckCircleIcon v-if="selected" />
|
|
<CircleIcon v-else />
|
|
|
|
<div class="info">
|
|
<span class="name">{{ timetable.title }}</span>
|
|
<span class="detail"
|
|
>{{ $t("settings.source") }}: {{ timetable.source }}
|
|
<span v-if="admin"
|
|
>, Class: {{ timetable.class }}, Id: {{ timetable.id }}</span
|
|
></span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="buttons">
|
|
<DownloadIcon v-if="!admin" @click="$emit('export')" />
|
|
<Edit2Icon v-if="editable && !remote" @click="$emit('edit')" />
|
|
<UploadCloudIcon v-if="editable && remote" @click="$emit('upload')" />
|
|
<CopyIcon v-if="!admin" @click="$emit('copy')" />
|
|
<TrashIcon
|
|
v-if="editable && !remote && !deleteConfirm"
|
|
@click="deleteConfirm = true"
|
|
/>
|
|
<AlertCircleIcon
|
|
v-if="editable && deleteConfirm"
|
|
color="red"
|
|
@click="$emit('delete')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.card {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 15px;
|
|
background-color: var(--element-color);
|
|
border-radius: 7px;
|
|
padding: 10px;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 15px;
|
|
align-items: center;
|
|
}
|
|
|
|
.info {
|
|
display: grid;
|
|
grid-template-rows: 1fr 1fr;
|
|
}
|
|
|
|
.name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.detail {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
gap: 7px;
|
|
opacity: 0.7;
|
|
}
|
|
</style>
|