fix:gantt chart styles
This commit is contained in:
@@ -8,25 +8,55 @@ import CostOverview from "@/components/CostOverview.vue";
|
|||||||
import GeneratedLeadsCard from "@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue";
|
import GeneratedLeadsCard from "@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue";
|
||||||
import AgGridTable from '@/views/demos/forms/tables/data-table/AgGridTable.vue';
|
import AgGridTable from '@/views/demos/forms/tables/data-table/AgGridTable.vue';
|
||||||
|
|
||||||
const ganttColumns = ref([
|
const ganttColumns = ref([])
|
||||||
{ field: 'id', headerName: 'ID', sortable: true, filter: true, width: 80 },
|
|
||||||
{ field: 'todo', headerName: 'Task', sortable: true, filter: true, flex: 1 },
|
const generateColumnsFromData = (data) => {
|
||||||
{ field: 'userId', headerName: 'User ID', sortable: true, filter: true, width: 100 },
|
if (!data || data.length === 0) return []
|
||||||
{
|
|
||||||
field: 'completed', headerName: 'Status', sortable: true, filter: true, width: 120, cellRenderer: (params) => {
|
const firstItem = data[0]
|
||||||
|
const columns = Object.keys(firstItem).map(key => {
|
||||||
|
const column = {
|
||||||
|
field: key,
|
||||||
|
headerName: key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1'),
|
||||||
|
sortable: true,
|
||||||
|
filter: true,
|
||||||
|
flex: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
if (key === 'id') {
|
||||||
|
column.width = 80
|
||||||
|
column.flex = undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
if (key === 'completed' && typeof firstItem[key] === 'boolean') {
|
||||||
|
column.width = 120
|
||||||
|
column.flex = undefined
|
||||||
|
column.cellRenderer = (params) => {
|
||||||
return params.value ? '<span style="color: green; font-weight: bold;">✓ Completed</span>' : '<span style="color: orange; font-weight: bold;">⏳ Pending</span>'
|
return params.value ? '<span style="color: green; font-weight: bold;">✓ Completed</span>' : '<span style="color: orange; font-weight: bold;">⏳ Pending</span>'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
])
|
|
||||||
|
if (key === 'userId') {
|
||||||
|
column.width = 100
|
||||||
|
column.flex = undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
return column
|
||||||
|
})
|
||||||
|
|
||||||
|
return columns
|
||||||
|
}
|
||||||
|
|
||||||
const processAPIData = (response) => {
|
const processAPIData = (response) => {
|
||||||
return response.todos || response
|
const data = response.todos || response
|
||||||
|
ganttColumns.value = generateColumnsFromData(data)
|
||||||
|
return data
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
const grid = GridStack.init({
|
const grid = GridStack.init({
|
||||||
column: 12,
|
column: 12,
|
||||||
cellHeight: '110',
|
cellHeight: '105',
|
||||||
float: true,
|
float: true,
|
||||||
draggable: { handle: '.grid-stack-item-content' },
|
draggable: { handle: '.grid-stack-item-content' },
|
||||||
resizable: true,
|
resizable: true,
|
||||||
@@ -39,7 +69,7 @@ onMounted(async () => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="grid-stack">
|
<div class="grid-stack">
|
||||||
<div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
|
<div class="grid-stack-item" gs-w="4" gs-min-h="2" gs-max-h="2">
|
||||||
<div class="grid-stack-item-content">
|
<div class="grid-stack-item-content">
|
||||||
<GeneratedLeadsCard :progress="32" />
|
<GeneratedLeadsCard :progress="32" />
|
||||||
</div>
|
</div>
|
||||||
@@ -64,12 +94,11 @@ onMounted(async () => {
|
|||||||
<AnalysisCard />
|
<AnalysisCard />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-stack-item" gs-w="12" gs-h="4" gs-max-h="8">
|
<div class="grid-stack-item" gs-w="12" gs-h="6" gs-max-h="6">
|
||||||
<div class="grid-stack-item-content">
|
<div class="grid-stack-item-content">
|
||||||
<AgGridTable :columns="ganttColumns" api-url="https://dummyjson.com/todos"
|
<AgGridTable :columns="ganttColumns" api-url="https://dummyjson.com/todos"
|
||||||
:data-processor="processAPIData" :enable-export="true" :enable-edit="true" :enable-delete="true"
|
:data-processor="processAPIData" :enable-export="true" :enable-edit="true" :enable-delete="true"
|
||||||
:enable-search="true" height="500px" />
|
:enable-search="true" height="500px" />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -776,642 +776,6 @@ onBeforeUnmount(() => {
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="scss">
|
||||||
.gantt-container {
|
@import '../../../styles/gantt-chart.scss';
|
||||||
width: 100%;
|
|
||||||
height: 650px;
|
|
||||||
background: rgb(var(--v-theme-surface));
|
|
||||||
border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
|
|
||||||
border-radius: 12px;
|
|
||||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
color: rgb(var(--v-theme-on-surface));
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt-toolbar {
|
|
||||||
padding: 16px 20px;
|
|
||||||
background: rgb(var(--v-theme-surface-variant));
|
|
||||||
border-bottom: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px 16px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: rgb(var(--v-theme-primary));
|
|
||||||
color: rgb(var(--v-theme-on-primary));
|
|
||||||
box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background: rgb(var(--v-theme-primary-darken-1));
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 4px 8px rgba(var(--v-theme-primary), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger {
|
|
||||||
background: rgb(var(--v-theme-error));
|
|
||||||
color: rgb(var(--v-theme-on-error));
|
|
||||||
box-shadow: 0 2px 4px rgba(var(--v-theme-error), 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger:hover {
|
|
||||||
background: rgb(var(--v-theme-error-darken-1));
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 4px 8px rgba(var(--v-theme-error), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-success {
|
|
||||||
background: rgb(var(--v-theme-success));
|
|
||||||
color: rgb(var(--v-theme-on-success));
|
|
||||||
box-shadow: 0 2px 4px rgba(var(--v-theme-success), 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-success:hover {
|
|
||||||
background: rgb(var(--v-theme-success-darken-1));
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 4px 8px rgba(var(--v-theme-success), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: rgb(var(--v-theme-surface-light));
|
|
||||||
color: rgb(var(--v-theme-on-surface-light));
|
|
||||||
border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background: rgb(var(--v-theme-grey-200));
|
|
||||||
border-color: rgb(var(--v-theme-grey-400));
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt-chart {
|
|
||||||
height: calc(100% - 77px);
|
|
||||||
min-height: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 10000;
|
|
||||||
animation: modalOverlayFadeIn 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes modalOverlayFadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-container {
|
|
||||||
background: rgb(var(--v-theme-surface));
|
|
||||||
border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
|
||||||
width: 90%;
|
|
||||||
max-width: 520px;
|
|
||||||
max-height: 80vh;
|
|
||||||
overflow: hidden;
|
|
||||||
animation: modalSlideIn 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes modalSlideIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-20px) scale(0.95);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0) scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 20px 24px;
|
|
||||||
border-bottom: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
|
|
||||||
background: rgb(var(--v-theme-surface-variant));
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: rgb(var(--v-theme-on-surface));
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-icon {
|
|
||||||
margin-right: 10px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-icon {
|
|
||||||
color: rgb(var(--v-theme-error));
|
|
||||||
background: rgba(var(--v-theme-error), 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-icon {
|
|
||||||
color: rgb(var(--v-theme-primary));
|
|
||||||
background: rgba(var(--v-theme-primary), 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-icon {
|
|
||||||
color: rgb(var(--v-theme-success));
|
|
||||||
background: rgba(var(--v-theme-success), 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-close {
|
|
||||||
background: rgb(var(--v-theme-grey-100));
|
|
||||||
border: none;
|
|
||||||
font-size: 18px;
|
|
||||||
color: rgb(var(--v-theme-on-surface));
|
|
||||||
cursor: pointer;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-close:hover {
|
|
||||||
background: rgb(var(--v-theme-grey-200));
|
|
||||||
color: rgb(var(--v-theme-error));
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body {
|
|
||||||
padding: 24px;
|
|
||||||
background: rgb(var(--v-theme-surface));
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-message {
|
|
||||||
font-size: 15px;
|
|
||||||
color: rgb(var(--v-theme-on-surface));
|
|
||||||
margin: 0 0 8px 0;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-warning {
|
|
||||||
font-size: 13px;
|
|
||||||
color: rgba(var(--v-theme-on-surface), 0.6);
|
|
||||||
margin: 0;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: rgb(var(--v-theme-on-surface));
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 12px 14px;
|
|
||||||
border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: rgb(var(--v-theme-on-surface));
|
|
||||||
background: rgb(var(--v-theme-surface));
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: rgb(var(--v-theme-primary));
|
|
||||||
box-shadow: 0 0 0 2px rgba(var(--v-theme-primary), 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input:invalid {
|
|
||||||
border-color: rgb(var(--v-theme-error));
|
|
||||||
box-shadow: 0 0 0 2px rgba(var(--v-theme-error), 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-input-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-range {
|
|
||||||
flex: 1;
|
|
||||||
height: 4px;
|
|
||||||
background: rgb(var(--v-theme-grey-200));
|
|
||||||
border-radius: 2px;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-range::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
background: rgb(var(--v-theme-primary));
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 2px solid rgb(var(--v-theme-surface));
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-range::-moz-range-thumb {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
background: rgb(var(--v-theme-primary));
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 2px solid rgb(var(--v-theme-surface));
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-value {
|
|
||||||
min-width: 40px;
|
|
||||||
text-align: right;
|
|
||||||
font-weight: 600;
|
|
||||||
color: rgb(var(--v-theme-primary));
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 2px 6px;
|
|
||||||
background: rgba(var(--v-theme-primary), 0.1);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-footer {
|
|
||||||
padding: 16px 24px;
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
justify-content: flex-end;
|
|
||||||
background: rgb(var(--v-theme-surface-variant));
|
|
||||||
border-top: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification {
|
|
||||||
position: fixed;
|
|
||||||
top: 20px;
|
|
||||||
right: 20px;
|
|
||||||
min-width: 300px;
|
|
||||||
background: rgb(var(--v-theme-surface));
|
|
||||||
border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|
||||||
z-index: 10001;
|
|
||||||
animation: notificationSlideIn 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes notificationSlideIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-message {
|
|
||||||
font-size: 14px;
|
|
||||||
color: rgb(var(--v-theme-on-surface));
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-close {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
font-size: 16px;
|
|
||||||
color: rgba(var(--v-theme-on-surface), 0.6);
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 3px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-close:hover {
|
|
||||||
background: rgba(var(--v-theme-on-surface), 0.1);
|
|
||||||
color: rgb(var(--v-theme-on-surface));
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-success {
|
|
||||||
border-left: 3px solid rgb(var(--v-theme-success));
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-error {
|
|
||||||
border-left: 3px solid rgb(var(--v-theme-error));
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-warning {
|
|
||||||
border-left: 3px solid rgb(var(--v-theme-warning));
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-info {
|
|
||||||
border-left: 3px solid rgb(var(--v-theme-info));
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt-container:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.gantt_container {
|
|
||||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
font-size: 13px;
|
|
||||||
background: rgb(var(--v-theme-surface));
|
|
||||||
color: rgb(var(--v-theme-on-surface));
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_grid_head_cell,
|
|
||||||
.gantt_grid_data .gantt_cell {
|
|
||||||
border-right: 1px solid rgba(var(--v-border-color), 0.5);
|
|
||||||
border-bottom: 1px solid rgba(var(--v-border-color), 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_grid_head_cell {
|
|
||||||
background: rgb(var(--v-theme-surface-variant));
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: center;
|
|
||||||
padding: 12px 10px;
|
|
||||||
color: rgb(var(--v-theme-on-surface-variant));
|
|
||||||
font-size: 11px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_cell {
|
|
||||||
padding: 10px 12px;
|
|
||||||
vertical-align: middle;
|
|
||||||
line-height: 1.4;
|
|
||||||
color: rgb(var(--v-theme-on-surface));
|
|
||||||
background: rgb(var(--v-theme-surface));
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_tree_content {
|
|
||||||
padding-left: 6px;
|
|
||||||
color: rgb(var(--v-theme-on-surface));
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_tree_icon {
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
margin-right: 6px;
|
|
||||||
opacity: 0.6;
|
|
||||||
color: rgb(var(--v-theme-on-surface));
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_task_line.completed-task {
|
|
||||||
background: rgb(var(--v-theme-success));
|
|
||||||
border: 1px solid rgb(var(--v-theme-success-darken-1));
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 1px 3px rgba(var(--v-theme-success), 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_task_line.high-progress-task {
|
|
||||||
background: rgb(var(--v-theme-primary));
|
|
||||||
border: 1px solid rgb(var(--v-theme-primary-darken-1));
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 1px 3px rgba(var(--v-theme-primary), 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_task_line.medium-progress-task {
|
|
||||||
background: rgb(var(--v-theme-warning));
|
|
||||||
border: 1px solid rgb(var(--v-theme-warning-darken-1));
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 1px 3px rgba(var(--v-theme-warning), 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_task_line.low-progress-task {
|
|
||||||
background: rgb(var(--v-theme-error));
|
|
||||||
border: 1px solid rgb(var(--v-theme-error-darken-1));
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 1px 3px rgba(var(--v-theme-error), 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-row {
|
|
||||||
background: rgba(var(--v-theme-primary), 0.1);
|
|
||||||
font-weight: 600;
|
|
||||||
color: rgb(var(--v-theme-on-surface));
|
|
||||||
border-left: 3px solid rgb(var(--v-theme-primary));
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_task_progress {
|
|
||||||
background: rgba(255, 255, 255, 0.3);
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_scale_cell {
|
|
||||||
border-bottom: 1px solid rgba(var(--v-border-color), 0.5);
|
|
||||||
border-right: 1px solid rgba(var(--v-border-color), 0.5);
|
|
||||||
background: rgb(var(--v-theme-surface-variant));
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgb(var(--v-theme-on-surface-variant));
|
|
||||||
font-size: 11px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_task_line {
|
|
||||||
border-radius: 4px;
|
|
||||||
height: 20px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_task_line:hover {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_side_content {
|
|
||||||
color: rgba(var(--v-theme-on-surface), 0.6);
|
|
||||||
font-size: 11px;
|
|
||||||
margin-top: 2px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.completed-mark {
|
|
||||||
color: rgb(var(--v-theme-success));
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_grid_data .gantt_row:nth-child(odd) {
|
|
||||||
background: rgb(var(--v-theme-surface));
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_grid_data .gantt_row:nth-child(even) {
|
|
||||||
background: rgba(var(--v-theme-surface-variant), 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_grid_data .gantt_row:hover {
|
|
||||||
background: rgba(var(--v-theme-primary), 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_selected .gantt_cell {
|
|
||||||
background: rgba(var(--v-theme-primary), 0.1);
|
|
||||||
color: rgb(var(--v-theme-on-surface));
|
|
||||||
border-left: 3px solid rgb(var(--v-theme-primary));
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_task_link {
|
|
||||||
stroke: rgba(var(--v-theme-on-surface), 0.4);
|
|
||||||
stroke-width: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_task_link .gantt_link_arrow {
|
|
||||||
fill: rgba(var(--v-theme-on-surface), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_milestone {
|
|
||||||
background: rgb(var(--v-theme-secondary));
|
|
||||||
border: 2px solid rgb(var(--v-theme-secondary-darken-1));
|
|
||||||
box-shadow: 0 1px 3px rgba(var(--v-theme-secondary), 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt-context-menu {
|
|
||||||
background: rgb(var(--v-theme-surface));
|
|
||||||
border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|
||||||
padding: 6px;
|
|
||||||
min-width: 180px;
|
|
||||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
font-size: 13px;
|
|
||||||
z-index: 9999;
|
|
||||||
animation: contextMenuFadeIn 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes contextMenuFadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.context-menu-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 8px 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: rgb(var(--v-theme-on-surface));
|
|
||||||
transition: background-color 0.1s ease;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.4;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.context-menu-item:hover {
|
|
||||||
background: rgba(var(--v-theme-primary), 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.context-menu-item:active {
|
|
||||||
background: rgba(var(--v-theme-primary), 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-icon {
|
|
||||||
margin-right: 8px;
|
|
||||||
opacity: 0.6;
|
|
||||||
flex-shrink: 0;
|
|
||||||
color: rgb(var(--v-theme-on-surface));
|
|
||||||
}
|
|
||||||
|
|
||||||
.context-menu-separator {
|
|
||||||
height: 1px;
|
|
||||||
background: rgba(var(--v-border-color), 0.5);
|
|
||||||
margin: 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_layout_root {
|
|
||||||
background: rgb(var(--v-theme-surface));
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_layout_root .gantt_layout_cell {
|
|
||||||
background: rgb(var(--v-theme-surface));
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_grid_scale .gantt_scale_line {
|
|
||||||
background: rgb(var(--v-theme-surface-variant));
|
|
||||||
border-bottom: 1px solid rgba(var(--v-border-color), 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_scale_line {
|
|
||||||
color: rgb(var(--v-theme-on-surface-variant));
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_task_content {
|
|
||||||
color: rgb(var(--v-theme-on-primary));
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gantt_tooltip {
|
|
||||||
background: rgb(var(--v-theme-surface));
|
|
||||||
color: rgb(var(--v-theme-on-surface));
|
|
||||||
border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
||||||
padding: 8px 12px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -73,6 +73,14 @@ const props = defineProps({
|
|||||||
keepOriginalKeys: {
|
keepOriginalKeys: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
maxCellTextLength: {
|
||||||
|
type: Number,
|
||||||
|
default: 30
|
||||||
|
},
|
||||||
|
tableId: {
|
||||||
|
type: String,
|
||||||
|
default: 'default'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -127,13 +135,42 @@ const processedData = computed(() => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Custom cell renderer component for long text with tooltip
|
||||||
|
const LongTextCellRenderer = {
|
||||||
|
template: `
|
||||||
|
<div
|
||||||
|
:title="fullText"
|
||||||
|
class="long-text-cell"
|
||||||
|
style="
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
cursor: help;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ displayText }}
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
setup(props) {
|
||||||
|
const fullText = props.value || ''
|
||||||
|
const maxLength = props.colDef?.cellRendererParams?.maxLength || 30
|
||||||
|
const displayText = fullText.length > maxLength
|
||||||
|
? fullText.substring(0, maxLength) + '...'
|
||||||
|
: fullText
|
||||||
|
|
||||||
|
return {
|
||||||
|
fullText,
|
||||||
|
displayText
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Dynamically infer columns from data when not provided
|
// Dynamically infer columns from data when not provided
|
||||||
const inferredColumns = computed(() => {
|
const inferredColumns = computed(() => {
|
||||||
if (Array.isArray(props.columns) && props.columns.length) return props.columns
|
if (Array.isArray(props.columns) && props.columns.length) return props.columns
|
||||||
const rows = Array.isArray(processedData.value) ? processedData.value.slice(0, 50) : []
|
const rows = Array.isArray(processedData.value) ? processedData.value.slice(0, 50) : []
|
||||||
if (!rows.length) return []
|
if (!rows.length) return []
|
||||||
|
|
||||||
// Collect union of keys across sample rows
|
|
||||||
const keySet = new Set()
|
const keySet = new Set()
|
||||||
rows.forEach(r => {
|
rows.forEach(r => {
|
||||||
if (r && typeof r === 'object') {
|
if (r && typeof r === 'object') {
|
||||||
@@ -143,7 +180,7 @@ const inferredColumns = computed(() => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const keys = Array.from(keySet)
|
const keys = Array.from(keySet).filter(k => k !== 'action')
|
||||||
const toTitle = (k) => k
|
const toTitle = (k) => k
|
||||||
.replace(/_/g, ' ')
|
.replace(/_/g, ' ')
|
||||||
.replace(/([a-z])([A-Z])/g, '$1 $2')
|
.replace(/([a-z])([A-Z])/g, '$1 $2')
|
||||||
@@ -151,20 +188,28 @@ const inferredColumns = computed(() => {
|
|||||||
|
|
||||||
const isLikelyDate = (v) => {
|
const isLikelyDate = (v) => {
|
||||||
if (typeof v !== 'string') return false
|
if (typeof v !== 'string') return false
|
||||||
// ISO or yyyy-mm-dd or timestamps in string
|
|
||||||
if (/^\d{4}-\d{2}-\d{2}/.test(v) || /T\d{2}:\d{2}:\d{2}/.test(v)) return true
|
if (/^\d{4}-\d{2}-\d{2}/.test(v) || /T\d{2}:\d{2}:\d{2}/.test(v)) return true
|
||||||
const d = new Date(v)
|
const d = new Date(v)
|
||||||
return !isNaN(d.getTime())
|
return !isNaN(d.getTime())
|
||||||
}
|
}
|
||||||
|
|
||||||
return keys.map(k => {
|
const isLongText = (samples) => {
|
||||||
// Detect type by scanning a few rows
|
return samples.some(val =>
|
||||||
let sampleVal = undefined
|
typeof val === 'string' && val.length > props.maxCellTextLength
|
||||||
for (let i = 0; i < rows.length; i++) {
|
)
|
||||||
const val = rows[i]?.[k]
|
|
||||||
if (val !== undefined && val !== null) { sampleVal = val; break }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const columns = keys.map(k => {
|
||||||
|
const sampleValues = []
|
||||||
|
for (let i = 0; i < Math.min(10, rows.length); i++) {
|
||||||
|
const val = rows[i]?.[k]
|
||||||
|
if (val !== undefined && val !== null) {
|
||||||
|
sampleValues.push(val)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const sampleVal = sampleValues[0]
|
||||||
|
|
||||||
const col = {
|
const col = {
|
||||||
field: k,
|
field: k,
|
||||||
headerName: toTitle(k),
|
headerName: toTitle(k),
|
||||||
@@ -173,6 +218,7 @@ const inferredColumns = computed(() => {
|
|||||||
editable: false,
|
editable: false,
|
||||||
minWidth: 100,
|
minWidth: 100,
|
||||||
flex: 1,
|
flex: 1,
|
||||||
|
suppressMovable: true
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof sampleVal === 'number') {
|
if (typeof sampleVal === 'number') {
|
||||||
@@ -189,16 +235,42 @@ const inferredColumns = computed(() => {
|
|||||||
const d = new Date(p.value)
|
const d = new Date(p.value)
|
||||||
return isNaN(d.getTime()) ? String(p.value) : d.toISOString().split('T')[0]
|
return isNaN(d.getTime()) ? String(p.value) : d.toISOString().split('T')[0]
|
||||||
}
|
}
|
||||||
|
} else if (typeof sampleVal === 'string' && isLongText(sampleValues)) {
|
||||||
|
col.flex = 1
|
||||||
|
col.cellRenderer = LongTextCellRenderer
|
||||||
|
col.cellRendererParams = {
|
||||||
|
maxLength: props.maxCellTextLength
|
||||||
|
}
|
||||||
|
col.tooltipField = k
|
||||||
} else {
|
} else {
|
||||||
col.flex = 1
|
col.flex = 1
|
||||||
}
|
}
|
||||||
|
|
||||||
return col
|
return col
|
||||||
})
|
})
|
||||||
|
|
||||||
|
columns.push({
|
||||||
|
headerName: "ACTION",
|
||||||
|
field: "action",
|
||||||
|
sortable: false,
|
||||||
|
filter: false,
|
||||||
|
flex: 1,
|
||||||
|
minWidth: 100,
|
||||||
|
hide: false,
|
||||||
|
editable: false,
|
||||||
|
cellRenderer: actionButtonsRenderer,
|
||||||
|
suppressHeaderMenuButton: true,
|
||||||
|
suppressMovable: true,
|
||||||
|
lockPosition: true,
|
||||||
|
colId: "action"
|
||||||
|
})
|
||||||
|
|
||||||
|
return columns
|
||||||
})
|
})
|
||||||
|
|
||||||
// Build grid with inferred columns (or props.columns if provided)
|
|
||||||
// Note: Passing inferredColumns.value at setup time; if you need live re-init on schema change, we can add a watcher.
|
let gridSetup = useDataTableGrid(processedData, isMobile, isTablet, inferredColumns, props.tableId)
|
||||||
let gridSetup = useDataTableGrid(processedData, isMobile, isTablet, inferredColumns)
|
console.log('AgGridTable props.tableId:', props.tableId);
|
||||||
const gridApi = gridSetup.gridApi
|
const gridApi = gridSetup.gridApi
|
||||||
const columnDefs = gridSetup.columnDefs
|
const columnDefs = gridSetup.columnDefs
|
||||||
const rowData = gridSetup.rowData
|
const rowData = gridSetup.rowData
|
||||||
@@ -330,10 +402,10 @@ const {
|
|||||||
deleteRowData,
|
deleteRowData,
|
||||||
showDeleteDialog,
|
showDeleteDialog,
|
||||||
deleteRow
|
deleteRow
|
||||||
} = useDataTableActions(gridApi, rowData)
|
} = useDataTableActions(gridApi, rowData, props.tableId)
|
||||||
|
|
||||||
const handleSaveUser = async (updatedData) => {
|
const handleSaveUser = async (updatedData) => {
|
||||||
try {
|
try {
|
||||||
// Optimistic update: update grid first
|
// Optimistic update: update grid first
|
||||||
saveUser(updatedData)
|
saveUser(updatedData)
|
||||||
|
|
||||||
@@ -349,13 +421,13 @@ try {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
emit('row-edited', updatedData)
|
emit('row-edited', updatedData)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error saving user:', error)
|
console.error('Error saving user:', error)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleConfirmDelete = async () => {
|
const handleConfirmDelete = async () => {
|
||||||
try {
|
try {
|
||||||
// Optimistic remove from grid first
|
// Optimistic remove from grid first
|
||||||
confirmDelete()
|
confirmDelete()
|
||||||
|
|
||||||
@@ -370,9 +442,9 @@ try {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
emit('row-deleted', deleteRowData.value)
|
emit('row-deleted', deleteRowData.value)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error deleting row:', error)
|
console.error('Error deleting row:', error)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const quickFilter = ref('')
|
const quickFilter = ref('')
|
||||||
@@ -387,11 +459,42 @@ const onGridReady = params => {
|
|||||||
gridReady(params)
|
gridReady(params)
|
||||||
setupGlobalHandlers()
|
setupGlobalHandlers()
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
const allPageSizeWrappers = document.querySelectorAll('.ag-paging-page-size .ag-picker-field-wrapper');
|
||||||
|
allPageSizeWrappers.forEach((pageSizeWrapper, index) => {
|
||||||
|
if (!pageSizeWrapper.hasAttribute('data-fixed')) {
|
||||||
|
pageSizeWrapper.setAttribute('data-fixed', 'true');
|
||||||
|
|
||||||
|
pageSizeWrapper.addEventListener('mousedown', (e) => {
|
||||||
|
if (e.button !== 0) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
const isExpanded = pageSizeWrapper.getAttribute('aria-expanded') === 'true';
|
||||||
|
pageSizeWrapper.setAttribute('aria-expanded', !isExpanded);
|
||||||
|
pageSizeWrapper.classList.toggle('ag-picker-collapsed', isExpanded);
|
||||||
|
pageSizeWrapper.classList.toggle('ag-picker-expanded', !isExpanded);
|
||||||
|
const selectList = pageSizeWrapper.parentNode.querySelector('[id^="ag-select-list"]');
|
||||||
|
if (selectList) {
|
||||||
|
selectList.style.display = isExpanded ? 'none' : 'block';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
pageSizeWrapper.addEventListener('contextmenu', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
if (props.apiUrl) {
|
if (props.apiUrl) {
|
||||||
fetchData()
|
fetchData()
|
||||||
}
|
}
|
||||||
|
|
||||||
// Observe container size to recalc pagination
|
|
||||||
try {
|
try {
|
||||||
const container = gridContainer?.value
|
const container = gridContainer?.value
|
||||||
if (container && typeof ResizeObserver !== 'undefined') {
|
if (container && typeof ResizeObserver !== 'undefined') {
|
||||||
@@ -405,9 +508,7 @@ const onGridReady = params => {
|
|||||||
})
|
})
|
||||||
ro.observe(container)
|
ro.observe(container)
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) { }
|
||||||
// no-op
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleQuickFilterUpdate = (value) => {
|
const handleQuickFilterUpdate = (value) => {
|
||||||
@@ -446,13 +547,14 @@ const handleResize = () => {
|
|||||||
updateColumnVisibility()
|
updateColumnVisibility()
|
||||||
updatePagination()
|
updatePagination()
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (gridApi.value && gridApi.value.sizeColumnsToFit) {
|
if (gridApi.value) {
|
||||||
gridApi.value.sizeColumnsToFit()
|
gridApi.value.sizeColumnsToFit();
|
||||||
}
|
}
|
||||||
}, 100)
|
}, 100)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const exportToPDF = () => {
|
const exportToPDF = () => {
|
||||||
if (!gridApi.value) {
|
if (!gridApi.value) {
|
||||||
console.error('Grid API not available')
|
console.error('Grid API not available')
|
||||||
@@ -509,63 +611,28 @@ const exportToPDF = () => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<v-card class="elevation-2">
|
<v-card class="elevation-2">
|
||||||
<v-overlay
|
<v-overlay v-model="isLoading" contained class="align-center justify-center">
|
||||||
v-model="isLoading"
|
<v-progress-circular indeterminate size="64" color="primary"></v-progress-circular>
|
||||||
contained
|
|
||||||
class="align-center justify-center"
|
|
||||||
>
|
|
||||||
<v-progress-circular
|
|
||||||
indeterminate
|
|
||||||
size="64"
|
|
||||||
color="primary"
|
|
||||||
></v-progress-circular>
|
|
||||||
</v-overlay>
|
</v-overlay>
|
||||||
|
|
||||||
<DataTableHeader
|
<DataTableHeader v-if="enableSearch || enableExport" :is-mobile="isMobile" :is-tablet="isTablet"
|
||||||
v-if="enableSearch || enableExport"
|
:quick-filter="quickFilter" :enable-search="enableSearch" :enable-export="enableExport"
|
||||||
:is-mobile="isMobile"
|
@update:quick-filter="handleQuickFilterUpdate" @export-csv="exportToCSV" @export-excel="exportToExcel"
|
||||||
:is-tablet="isTablet"
|
@export-pdf="exportToPDF" />
|
||||||
:quick-filter="quickFilter"
|
|
||||||
:enable-search="enableSearch"
|
|
||||||
:enable-export="enableExport"
|
|
||||||
@update:quick-filter="handleQuickFilterUpdate"
|
|
||||||
@export-csv="exportToCSV"
|
|
||||||
@export-excel="exportToExcel"
|
|
||||||
@export-pdf="exportToPDF"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<v-divider v-if="enableSearch || enableExport" />
|
<v-divider v-if="enableSearch || enableExport" />
|
||||||
|
|
||||||
<v-card-text class="pa-0">
|
<v-card-text class="pa-0">
|
||||||
<AgGridVue
|
<AgGridVue ref="gridContainer" class="vuetify-grid ag-theme-alpine-dark"
|
||||||
class="vuetify-grid ag-theme-alpine-dark"
|
:style="`height:${isMobile ? mobileHeight : height}; width:100%`" :columnDefs="columnDefs"
|
||||||
:style="`height:${isMobile ? mobileHeight : height}; width:100%`"
|
:rowData="processedData" :defaultColDef="defaultColDef" :gridOptions="gridOptions" @grid-ready="onGridReady"
|
||||||
:columnDefs="columnDefs"
|
@cell-value-changed="onCellValueChanged" />
|
||||||
:rowData="processedData"
|
|
||||||
:defaultColDef="defaultColDef"
|
|
||||||
:gridOptions="gridOptions"
|
|
||||||
@grid-ready="onGridReady"
|
|
||||||
@cell-value-changed="onCellValueChanged"
|
|
||||||
/>
|
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
|
|
||||||
<UserDetailsDialog
|
<UserDetailsDialog v-if="enableEdit" v-model="showDetailsDialog" :selected-row-data="selectedRowData"
|
||||||
v-if="enableEdit"
|
:columns="columnDefs" :is-mobile="isMobile" @save-user="handleSaveUser" />
|
||||||
v-model="showDetailsDialog"
|
|
||||||
:selected-row-data="selectedRowData"
|
|
||||||
:columns="columnDefs"
|
|
||||||
:is-mobile="isMobile"
|
|
||||||
@save-user="handleSaveUser"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ConfirmDeleteDialog
|
<ConfirmDeleteDialog v-if="enableDelete" v-model="showDeleteDialog" :selected-row-data="deleteRowData"
|
||||||
v-if="enableDelete"
|
:columns="columnDefs" :is-mobile="isMobile" @confirm="handleConfirmDelete" @cancel="cancelDelete" />
|
||||||
v-model="showDeleteDialog"
|
|
||||||
:selected-row-data="deleteRowData"
|
|
||||||
:columns="columnDefs"
|
|
||||||
:is-mobile="isMobile"
|
|
||||||
@confirm="handleConfirmDelete"
|
|
||||||
@cancel="cancelDelete"
|
|
||||||
/>
|
|
||||||
</v-card>
|
</v-card>
|
||||||
</template>
|
</template>
|
||||||
@@ -478,16 +478,18 @@ export function useDataTableGrid(
|
|||||||
|
|
||||||
const processedColumns = columns.map(col => ({
|
const processedColumns = columns.map(col => ({
|
||||||
...col,
|
...col,
|
||||||
// Default to inline-editable unless explicitly disabled, skip action column
|
|
||||||
editable: col.field === 'action' ? false : (col.editable !== undefined ? col.editable : true),
|
editable: col.field === 'action' ? false : (col.editable !== undefined ? col.editable : true),
|
||||||
suppressHeaderMenuButton: col.suppressHeaderMenuButton !== undefined ? col.suppressHeaderMenuButton : false,
|
suppressHeaderMenuButton: col.suppressHeaderMenuButton !== undefined ? col.suppressHeaderMenuButton : false,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const withSelection = ensureSingleSelectionColumn(processedColumns);
|
const withSelection = ensureSingleSelectionColumn(processedColumns);
|
||||||
|
|
||||||
const hasActionColumn = processedColumns.some(col => col.field === 'action');
|
const actionIndex = withSelection.findIndex(col => col.field === 'action');
|
||||||
|
|
||||||
if (!hasActionColumn) {
|
if (actionIndex !== -1) {
|
||||||
|
const actionColumn = withSelection.splice(actionIndex, 1)[0];
|
||||||
|
withSelection.push(actionColumn);
|
||||||
|
} else {
|
||||||
withSelection.push({
|
withSelection.push({
|
||||||
headerName: "ACTION",
|
headerName: "ACTION",
|
||||||
field: "action",
|
field: "action",
|
||||||
@@ -503,7 +505,7 @@ export function useDataTableGrid(
|
|||||||
}
|
}
|
||||||
|
|
||||||
return withSelection;
|
return withSelection;
|
||||||
};
|
};
|
||||||
|
|
||||||
const columnDefs = computed(() => {
|
const columnDefs = computed(() => {
|
||||||
const cols = resolveColumns()
|
const cols = resolveColumns()
|
||||||
@@ -529,6 +531,7 @@ export function useDataTableGrid(
|
|||||||
suppressHeaderMenuButton: false,
|
suppressHeaderMenuButton: false,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
// 🔥 FIX: Improved gridOptions with better pagination settings
|
||||||
const gridOptions = computed(() => ({
|
const gridOptions = computed(() => ({
|
||||||
theme: "legacy",
|
theme: "legacy",
|
||||||
headerHeight: isMobile.value ? 48 : 56,
|
headerHeight: isMobile.value ? 48 : 56,
|
||||||
@@ -541,9 +544,14 @@ export function useDataTableGrid(
|
|||||||
rowSelection: 'multiple',
|
rowSelection: 'multiple',
|
||||||
rowMultiSelectWithClick: true,
|
rowMultiSelectWithClick: true,
|
||||||
suppressRowClickSelection: false,
|
suppressRowClickSelection: false,
|
||||||
|
|
||||||
|
// 🔥 FIXED PAGINATION SETTINGS
|
||||||
pagination: true,
|
pagination: true,
|
||||||
paginationPageSize: isMobile.value ? 5 : 10,
|
paginationPageSize: isMobile.value ? 10 : 20,
|
||||||
paginationPageSizeSelector: isMobile.value ? [5, 10, 20] : [5, 10, 20, 50],
|
paginationPageSizeSelector: [5, 10, 20, 50, 100],
|
||||||
|
paginationAutoPageSize: false, // 🔥 KEY: Disable auto page sizing
|
||||||
|
suppressPaginationPanel: false, // 🔥 KEY: Show pagination controls
|
||||||
|
|
||||||
enableCellTextSelection: true,
|
enableCellTextSelection: true,
|
||||||
suppressHorizontalScroll: false,
|
suppressHorizontalScroll: false,
|
||||||
alwaysShowHorizontalScroll: false,
|
alwaysShowHorizontalScroll: false,
|
||||||
@@ -597,29 +605,18 @@ export function useDataTableGrid(
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 🔥 SIMPLIFIED UPDATE PAGINATION - Only for responsive page sizes
|
||||||
const updatePagination = () => {
|
const updatePagination = () => {
|
||||||
if (!gridApi.value) return;
|
if (!gridApi.value) return;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const gui = gridApi.value.getGui && gridApi.value.getGui();
|
// Simple responsive pagination size adjustment
|
||||||
const containerHeight = gui ? gui.clientHeight : 0;
|
const newPageSize = isMobile.value ? 10 : 20;
|
||||||
|
|
||||||
const headerH = Number(gridOptions.value.headerHeight || (isMobile.value ? 48 : 56));
|
|
||||||
// Estimate footer height based on overrides (mobile/desktop)
|
|
||||||
const footerH = isMobile.value ? 48 : 56;
|
|
||||||
const rowH = Number(gridOptions.value.rowHeight || (isMobile.value ? 44 : 52));
|
|
||||||
const padding = 8;
|
|
||||||
|
|
||||||
let available = containerHeight - headerH - footerH - padding;
|
|
||||||
if (!Number.isFinite(available) || available <= 0) {
|
|
||||||
available = (isMobile.value ? 360 : 520) - headerH - footerH - padding;
|
|
||||||
}
|
|
||||||
|
|
||||||
let rowsPerPage = Math.floor(available / rowH);
|
|
||||||
rowsPerPage = Math.max(3, Math.min(rowsPerPage, 100));
|
|
||||||
|
|
||||||
if (typeof gridApi.value.paginationSetPageSize === 'function') {
|
if (typeof gridApi.value.paginationSetPageSize === 'function') {
|
||||||
gridApi.value.paginationSetPageSize(rowsPerPage);
|
gridApi.value.paginationSetPageSize(newPageSize);
|
||||||
|
} else if (typeof gridApi.value.setGridOption === 'function') {
|
||||||
|
gridApi.value.setGridOption('paginationPageSize', newPageSize);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.warn('Error updating pagination:', error);
|
console.warn('Error updating pagination:', error);
|
||||||
@@ -632,7 +629,7 @@ export function useDataTableGrid(
|
|||||||
console.log('Grid API set:', gridApi.value)
|
console.log('Grid API set:', gridApi.value)
|
||||||
|
|
||||||
updateColumnVisibility();
|
updateColumnVisibility();
|
||||||
updatePagination();
|
// 🔥 FIX: Don't call updatePagination immediately - let AG Grid handle it
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (gridApi.value && gridApi.value.sizeColumnsToFit) {
|
if (gridApi.value && gridApi.value.sizeColumnsToFit) {
|
||||||
@@ -664,7 +661,7 @@ export function useDataTableGrid(
|
|||||||
|
|
||||||
watch([isMobile, isTablet], () => {
|
watch([isMobile, isTablet], () => {
|
||||||
updateColumnVisibility();
|
updateColumnVisibility();
|
||||||
updatePagination();
|
updatePagination(); // Only for responsive size changes
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(data, (newData) => {
|
watch(data, (newData) => {
|
||||||
@@ -687,7 +684,6 @@ export function useDataTableGrid(
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Helpers
|
// Helpers
|
||||||
|
|
||||||
function ensureSingleSelectionColumn(columns) {
|
function ensureSingleSelectionColumn(columns) {
|
||||||
if (!Array.isArray(columns)) return columns;
|
if (!Array.isArray(columns)) return columns;
|
||||||
|
|
||||||
@@ -715,5 +711,3 @@ function ensureSingleSelectionColumn(columns) {
|
|||||||
|
|
||||||
return unique;
|
return unique;
|
||||||
}
|
}
|
||||||
|
|
||||||
// removed selection column injection
|
|
||||||
@@ -607,31 +607,7 @@
|
|||||||
justify-content: space-between !important;
|
justify-content: space-between !important;
|
||||||
transition: all 0.2s ease-in-out !important;
|
transition: all 0.2s ease-in-out !important;
|
||||||
position: relative !important;
|
position: relative !important;
|
||||||
overflow: visible !important;
|
overflow: hidden !important;
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure page-size picker can overflow and is clickable */
|
|
||||||
.ag-theme-alpine-dark.vuetify-grid .ag-paging-page-size,
|
|
||||||
.ag-theme-alpine.vuetify-grid .ag-paging-page-size {
|
|
||||||
position: relative !important;
|
|
||||||
overflow: visible !important;
|
|
||||||
z-index: 2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ag-theme-alpine-dark.vuetify-grid .ag-wrapper.ag-picker-field-wrapper,
|
|
||||||
.ag-theme-alpine.vuetify-grid .ag-wrapper.ag-picker-field-wrapper {
|
|
||||||
position: relative !important;
|
|
||||||
pointer-events: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Raise ag-Grid popups above footer */
|
|
||||||
.ag-theme-alpine-dark.vuetify-grid .ag-popup,
|
|
||||||
.ag-theme-alpine.vuetify-grid .ag-popup,
|
|
||||||
.ag-theme-alpine-dark.vuetify-grid .ag-select-list,
|
|
||||||
.ag-theme-alpine.vuetify-grid .ag-select-list,
|
|
||||||
.ag-theme-alpine-dark.vuetify-grid .ag-menu,
|
|
||||||
.ag-theme-alpine.vuetify-grid .ag-menu {
|
|
||||||
z-index: 9999 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ag-theme-alpine-dark.vuetify-grid .ag-paging-panel:hover {
|
.ag-theme-alpine-dark.vuetify-grid .ag-paging-panel:hover {
|
||||||
@@ -971,7 +947,7 @@
|
|||||||
justify-content: space-between !important;
|
justify-content: space-between !important;
|
||||||
transition: all 0.2s ease-in-out !important;
|
transition: all 0.2s ease-in-out !important;
|
||||||
position: relative !important;
|
position: relative !important;
|
||||||
overflow: visible !important;
|
overflow: hidden !important;
|
||||||
font-size: 14px !important;
|
font-size: 14px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
772
resources/styles/gantt-chart.scss
Normal file
772
resources/styles/gantt-chart.scss
Normal file
@@ -0,0 +1,772 @@
|
|||||||
|
.gantt-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 650px;
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
border-radius: 12px;
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
color: rgb(var(--v-theme-on-surface));
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt-toolbar {
|
||||||
|
padding: 16px 20px;
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 16px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: rgb(var(--v-theme-primary));
|
||||||
|
color: rgb(var(--v-theme-on-primary));
|
||||||
|
box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: rgba(var(--v-theme-primary), 0.8);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 8px rgba(var(--v-theme-primary), 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background: rgb(var(--v-theme-error));
|
||||||
|
color: rgb(var(--v-theme-on-error));
|
||||||
|
box-shadow: 0 2px 4px rgba(var(--v-theme-error), 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger:hover {
|
||||||
|
background: rgba(var(--v-theme-error), 0.8);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 8px rgba(var(--v-theme-error), 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success {
|
||||||
|
background: rgb(var(--v-theme-success));
|
||||||
|
color: rgb(var(--v-theme-on-success));
|
||||||
|
box-shadow: 0 2px 4px rgba(var(--v-theme-success), 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success:hover {
|
||||||
|
background: rgba(var(--v-theme-success), 0.8);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 8px rgba(var(--v-theme-success), 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: rgba(var(--v-theme-on-surface), 0.05);
|
||||||
|
color: rgb(var(--v-theme-on-surface));
|
||||||
|
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: rgba(var(--v-theme-on-surface), 0.1);
|
||||||
|
border-color: rgba(var(--v-border-color), 0.5);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt-chart {
|
||||||
|
height: calc(100% - 77px);
|
||||||
|
min-height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 10000;
|
||||||
|
animation: modalOverlayFadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes modalOverlayFadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-container {
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||||
|
width: 90%;
|
||||||
|
max-width: 520px;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow: hidden;
|
||||||
|
animation: modalSlideIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes modalSlideIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-20px) scale(0.95);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px 24px;
|
||||||
|
border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgb(var(--v-theme-on-surface));
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-icon {
|
||||||
|
margin-right: 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-icon {
|
||||||
|
color: rgb(var(--v-theme-error));
|
||||||
|
background: rgba(var(--v-theme-error), 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-icon {
|
||||||
|
color: rgb(var(--v-theme-primary));
|
||||||
|
background: rgba(var(--v-theme-primary), 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-icon {
|
||||||
|
color: rgb(var(--v-theme-success));
|
||||||
|
background: rgba(var(--v-theme-success), 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close {
|
||||||
|
background: rgba(var(--v-theme-on-surface), 0.05);
|
||||||
|
border: none;
|
||||||
|
font-size: 18px;
|
||||||
|
color: rgb(var(--v-theme-on-surface));
|
||||||
|
cursor: pointer;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close:hover {
|
||||||
|
background: rgba(var(--v-theme-on-surface), 0.1);
|
||||||
|
color: rgb(var(--v-theme-error));
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
padding: 24px;
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-message {
|
||||||
|
font-size: 15px;
|
||||||
|
color: rgb(var(--v-theme-on-surface));
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-warning {
|
||||||
|
font-size: 13px;
|
||||||
|
color: rgba(var(--v-theme-on-surface), 0.6);
|
||||||
|
margin: 0;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgb(var(--v-theme-on-surface));
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgb(var(--v-theme-on-surface));
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: rgb(var(--v-theme-primary));
|
||||||
|
box-shadow: 0 0 0 2px rgba(var(--v-theme-primary), 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input:invalid {
|
||||||
|
border-color: rgb(var(--v-theme-error));
|
||||||
|
box-shadow: 0 0 0 2px rgba(var(--v-theme-error), 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-input-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-range {
|
||||||
|
flex: 1;
|
||||||
|
height: 4px;
|
||||||
|
background: rgba(var(--v-theme-on-surface), 0.1);
|
||||||
|
border-radius: 2px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-range::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background: rgb(var(--v-theme-primary));
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 2px solid rgb(var(--v-theme-surface));
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-range::-moz-range-thumb {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background: rgb(var(--v-theme-primary));
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 2px solid rgb(var(--v-theme-surface));
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-value {
|
||||||
|
min-width: 40px;
|
||||||
|
text-align: right;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgb(var(--v-theme-primary));
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
background: rgba(var(--v-theme-primary), 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
padding: 16px 24px;
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification {
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
min-width: 300px;
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||||
|
z-index: 10001;
|
||||||
|
animation: notificationSlideIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes notificationSlideIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-message {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgb(var(--v-theme-on-surface));
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-close {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(var(--v-theme-on-surface), 0.6);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-close:hover {
|
||||||
|
background: rgba(var(--v-theme-on-surface), 0.1);
|
||||||
|
color: rgb(var(--v-theme-on-surface));
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-success {
|
||||||
|
border-left: 3px solid rgb(var(--v-theme-success));
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-error {
|
||||||
|
border-left: 3px solid rgb(var(--v-theme-error));
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-warning {
|
||||||
|
border-left: 3px solid rgb(var(--v-theme-warning));
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-info {
|
||||||
|
border-left: 3px solid rgb(var(--v-theme-info));
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt-container:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_container {
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
font-size: 13px;
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
color: rgb(var(--v-theme-on-surface));
|
||||||
|
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_layout_content {
|
||||||
|
background: rgb(var(--v-theme-surface)) !important;
|
||||||
|
color: rgb(var(--v-theme-on-surface)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_grid_head_cell,
|
||||||
|
.gantt_grid_data .gantt_cell {
|
||||||
|
border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_grid_head_cell {
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
padding: 12px 10px;
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||||
|
font-size: 11px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_cell {
|
||||||
|
padding: 10px 12px;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||||
|
background: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_tree_content {
|
||||||
|
padding-left: 6px;
|
||||||
|
color: rgb(var(--v-theme-on-surface));
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_tree_icon {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
margin-right: 6px;
|
||||||
|
opacity: 0.6;
|
||||||
|
color: rgb(var(--v-theme-on-surface));
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_line.completed-task {
|
||||||
|
background: rgb(var(--v-theme-success));
|
||||||
|
border: 1px solid rgba(var(--v-theme-success), 0.8);
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 1px 3px rgba(var(--v-theme-success), 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_line.high-progress-task {
|
||||||
|
background: rgb(var(--v-theme-primary));
|
||||||
|
border: 1px solid rgba(var(--v-theme-primary), 0.8);
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 1px 3px rgba(var(--v-theme-primary), 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_line.medium-progress-task {
|
||||||
|
background: rgb(var(--v-theme-warning));
|
||||||
|
border: 1px solid rgba(var(--v-theme-warning), 0.8);
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 1px 3px rgba(var(--v-theme-warning), 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_line.low-progress-task {
|
||||||
|
background: rgb(var(--v-theme-error));
|
||||||
|
border: 1px solid rgba(var(--v-theme-error), 0.8);
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 1px 3px rgba(var(--v-theme-error), 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-row {
|
||||||
|
background: rgba(var(--v-theme-primary), 0.1);
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgb(var(--v-theme-on-surface));
|
||||||
|
border-left: 3px solid rgb(var(--v-theme-primary));
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_progress {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_scale_cell {
|
||||||
|
border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||||
|
font-size: 11px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_line {
|
||||||
|
border-radius: 4px;
|
||||||
|
height: 20px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_line:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_side_content {
|
||||||
|
color: rgba(var(--v-theme-on-surface), 0.6);
|
||||||
|
font-size: 11px;
|
||||||
|
margin-top: 2px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.completed-mark {
|
||||||
|
color: rgb(var(--v-theme-success));
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_grid_data .gantt_row {
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_grid_data .gantt_row.gantt_row_odd {
|
||||||
|
background: rgba(var(--v-theme-on-surface), 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_grid_data .gantt_row:hover {
|
||||||
|
background: rgba(var(--v-theme-primary), 0.08) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_row:hover {
|
||||||
|
background: rgba(var(--v-theme-primary), 0.08) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_row_task:hover {
|
||||||
|
background: rgba(var(--v-theme-primary), 0.08) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_row.gantt_row_odd:hover {
|
||||||
|
background: rgba(var(--v-theme-primary), 0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_row:hover .gantt_cell {
|
||||||
|
background: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_row:hover .gantt_tree_content {
|
||||||
|
color: rgb(var(--v-theme-on-surface)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_selected .gantt_cell {
|
||||||
|
background: rgba(var(--v-theme-primary), 0.12) !important;
|
||||||
|
color: rgb(var(--v-theme-on-surface)) !important;
|
||||||
|
border-left: 3px solid rgb(var(--v-theme-primary)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_row_task.gantt_selected {
|
||||||
|
background: rgba(var(--v-theme-primary), 0.12) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_row.gantt_selected {
|
||||||
|
background: rgba(var(--v-theme-primary), 0.12) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_row.gantt_selected .gantt_tree_content {
|
||||||
|
color: rgb(var(--v-theme-on-surface)) !important;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_row.gantt_selected.gantt_row_odd {
|
||||||
|
background: rgba(var(--v-theme-primary), 0.15) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_selected {
|
||||||
|
background: rgba(var(--v-theme-primary), 0.12) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_link {
|
||||||
|
stroke: rgba(var(--v-theme-on-surface), 0.4);
|
||||||
|
stroke-width: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_link .gantt_link_arrow {
|
||||||
|
fill: rgba(var(--v-theme-on-surface), 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_milestone {
|
||||||
|
background: rgb(var(--v-theme-secondary));
|
||||||
|
border: 2px solid rgba(var(--v-theme-secondary), 0.8);
|
||||||
|
box-shadow: 0 1px 3px rgba(var(--v-theme-secondary), 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt-context-menu {
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||||
|
padding: 6px;
|
||||||
|
min-width: 180px;
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
font-size: 13px;
|
||||||
|
z-index: 9999;
|
||||||
|
animation: contextMenuFadeIn 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes contextMenuFadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.context-menu-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: rgb(var(--v-theme-on-surface));
|
||||||
|
transition: background-color 0.1s ease;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.4;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.context-menu-item:hover {
|
||||||
|
background: rgba(var(--v-theme-primary), 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.context-menu-item:active {
|
||||||
|
background: rgba(var(--v-theme-primary), 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-icon {
|
||||||
|
margin-right: 8px;
|
||||||
|
opacity: 0.6;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: rgb(var(--v-theme-on-surface));
|
||||||
|
}
|
||||||
|
|
||||||
|
.context-menu-separator {
|
||||||
|
height: 1px;
|
||||||
|
background: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
margin: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_layout_root {
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_layout_root .gantt_layout_cell {
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_grid_scale .gantt_scale_line {
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_scale_line {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_content {
|
||||||
|
color: rgb(var(--v-theme-on-primary));
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_tooltip {
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
color: rgb(var(--v-theme-on-surface));
|
||||||
|
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_grid {
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_grid_scale {
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_bg {
|
||||||
|
background: rgba(var(--v-theme-on-surface), 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_bg .gantt_task_row {
|
||||||
|
background: rgb(var(--v-theme-surface)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_bg .gantt_task_row.odd {
|
||||||
|
background: rgba(var(--v-theme-on-surface), 0.02) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_bg .gantt_task_cell {
|
||||||
|
background: inherit;
|
||||||
|
border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_data_area {
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_scale {
|
||||||
|
background: rgb(var(--v-theme-surface)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_hor_scroll {
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_ver_scroll {
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_hor_scroll .gantt_scroll_hor {
|
||||||
|
background: rgba(var(--v-theme-on-surface), 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_ver_scroll .gantt_scroll_ver {
|
||||||
|
background: rgba(var(--v-theme-on-surface), 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_hor_scroll .gantt_scroll_hor:hover,
|
||||||
|
.gantt_ver_scroll .gantt_scroll_ver:hover {
|
||||||
|
background: rgba(var(--v-theme-on-surface), 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_scale .gantt_scale_line {
|
||||||
|
background: rgb(var(--v-theme-surface)) !important;
|
||||||
|
color: rgb(var(--v-theme-on-surface)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_scale .gantt_scale_cell {
|
||||||
|
background: rgb(var(--v-theme-surface)) !important;
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
|
||||||
|
border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_bars_area {
|
||||||
|
background: rgb(var(--v-theme-surface)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_links_area {
|
||||||
|
background: rgb(var(--v-theme-surface)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_link .gantt_link_line_left,
|
||||||
|
.gantt_task_link .gantt_link_line_right,
|
||||||
|
.gantt_task_link .gantt_link_line_up,
|
||||||
|
.gantt_task_link .gantt_link_line_down {
|
||||||
|
background: rgba(var(--v-theme-on-surface), 0.4) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_link .gantt_link_corner {
|
||||||
|
border-color: rgba(var(--v-theme-on-surface), 0.4) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gantt_task_link .gantt_link_arrow:before {
|
||||||
|
border-color: rgba(var(--v-theme-on-surface), 0.4) !important;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user