fix:gantt chart styles

2025-09-08 10:45:29 +03:30
parent c382d97d8d
commit a768c64a68
6 changed files with 1296 additions and 1094 deletions
--- a/resources/js/pages/dashboards/demo.vue
+++ b/resources/js/pages/dashboards/demo.vue
@@ -8,25 +8,55 @@ import CostOverview from "@/components/CostOverview.vue";
 import GeneratedLeadsCard from "@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue";
 import AgGridTable from '@/views/demos/forms/tables/data-table/AgGridTable.vue';

-const ganttColumns = ref([
-  { field: 'id', headerName: 'ID', sortable: true, filter: true, width: 80 },
-  { field: 'todo', headerName: 'Task', sortable: true, filter: true, flex: 1 },
-  { field: 'userId', headerName: 'User ID', sortable: true, filter: true, width: 100 },
-  {
-    field: 'completed', headerName: 'Status', sortable: true, filter: true, width: 120, cellRenderer: (params) => {
-      return params.value ? '<span style="color: green; font-weight: bold;">✓ Completed</span>' : '<span style="color: orange; font-weight: bold;">⏳ Pending</span>'
+const ganttColumns = ref([])
+
+const generateColumnsFromData = (data) => {
+  if (!data || data.length === 0) return []
+  
+  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>'
+      }
+    }
+
+    if (key === 'userId') {
+      column.width = 100
+      column.flex = undefined
+    }
+
+    return column
+  })
+  
+  return columns
+}

 const processAPIData = (response) => {
-  return response.todos || response
+  const data = response.todos || response
+  ganttColumns.value = generateColumnsFromData(data)
+  return data
 }

 onMounted(async () => {
  const grid = GridStack.init({
    column: 12,
-    cellHeight: '110',
+    cellHeight: '105',
    float: true,
    draggable: { handle: '.grid-stack-item-content' },
    resizable: true,
@@ -39,7 +69,7 @@ onMounted(async () => {

 <template>
  <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">
        <GeneratedLeadsCard :progress="32" />
      </div>
@@ -64,12 +94,11 @@ onMounted(async () => {
        <AnalysisCard />
      </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">
        <AgGridTable :columns="ganttColumns" api-url="https://dummyjson.com/todos"
          :data-processor="processAPIData" :enable-export="true" :enable-edit="true" :enable-delete="true"
          :enable-search="true" height="500px" />
-
      </div>
    </div>
  </div>
--- a/resources/js/pages/dashboards/gantt.vue
+++ b/resources/js/pages/dashboards/gantt.vue
@@ -776,642 +776,6 @@ onBeforeUnmount(() => {
  </div>
 </template>

-<style scoped>
-.gantt-container {
-  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 lang="scss">
+@import '../../../styles/gantt-chart.scss';
 </style>