Sidebar Tree Calendar Resource View

​

Documentation: SidebarTreeCalendar Component (English)

​

1. Overview

​

2. Features

• Dynamic Filtering: The calendar view is dynamically updated based on the selected node in the sidebar tree.
• Collapsible Sidebar: The sidebar can be toggled to maximize the calendar viewing area.
• Searchable Tree: Includes a search input to quickly find nodes within the tree.
• Inherited Power: Leverages all the features of ResourceCalendarView, including its dual views, on-demand loading, and resource pagination.
• Highly Configurable: All API endpoints, titles, and filter keys are customizable via props.
• CRUD Events: Emits events for tree management (add, edit, delete), allowing the parent page to handle the logic (e.g., by opening modals).

​

3. Props

​

4. Pass-Through Props

​

5. Emitted Events

​

6. Backend API Requirements

1. Tree API (nodesUrl):

• Must be a POST endpoint that can accept a search term.
• Should return an array of node objects, each with at least id, name, and an optional children array for nesting.

2. Calendar/Resource APIs (eventsEndpoint, resourcesEndpoint):

• Must be able to handle an additional query parameter based on the filterKey prop. For example, if filterKey is 'categoryId', your Laravel controller should check for request('categoryId') and add a where clause to the query.

​

7. Usage Example

<!-- MySchedulePage.vue -->
<template>
  <div class="container-fluid mt-4">
    <SidebarTreeCalendar
      sidebar-title="Projects"
      content-title="Schedule for Project:"
      nodes-url="/api/projects/tree"
      events-endpoint="/api/schedule/events"
      resources-endpoint="/api/schedule/resources"
      filter-key="projectId"

      @event-click="openEventModal"
      @edit-node="openProjectEditor"

      <!-- Pass-through prop for ResourceTimelineView -->
      :row-height="60"
    />
  </div>
</template>

<script>
import SidebarTreeCalendar from './components/SidebarTreeCalendar.vue';

export default {
  components: { SidebarTreeCalendar },
  methods: {
    openEventModal(event) {
      // Logic to open a modal with the event's details
      console.log('Opening details for event:', event.title);
    },
    openProjectEditor(node) {
      // Logic to open a form/modal to edit the selected project
      console.log('Editing project:', node.name);
    }
  }
}
</script>

​

Dokumentasi: Komponen SidebarTreeCalendar (Bahasa Indonesia)

​

1. Gambaran Umum

​

2. Fitur

• Filter Dinamis: Tampilan kalender diperbarui secara dinamis berdasarkan node yang dipilih di sidebar.
• Sidebar Lipat: Sidebar dapat disembunyikan untuk memaksimalkan area tampilan kalender.
• Pohon yang Dapat Dicari: Menyertakan input pencarian untuk menemukan node di dalam pohon dengan cepat.
• Mewarisi Kekuatan ResourceCalendarView: Memanfaatkan semua fitur dari ResourceCalendarView, termasuk tampilan ganda, pemuatan on-demand, dan paginasi resource.
• Sangat Mudah Dikonfigurasi: Semua endpoint API, judul, dan kunci filter dapat disesuaikan melalui props.
• Event CRUD: Memancarkan event untuk manajemen pohon (tambah, edit, hapus), memungkinkan halaman induk untuk menangani logika (misalnya, dengan membuka modal).

​

3. Props

​

4. Props Penerus (Pass-Through Props)

​

5. Event yang Di-emit

​

6. Kebutuhan API Backend

1. API Pohon (nodesUrl):

• Harus berupa endpoint POST yang dapat menerima istilah search.
• Harus mengembalikan sebuah array objek node, masing-masing dengan setidaknya id, name, dan array children (opsional) untuk data bersarang.

2. API Kalender/Resource (eventsEndpoint, resourcesEndpoint):

• Harus dapat menangani parameter query tambahan berdasarkan prop filterKey. Contohnya, jika filterKey adalah 'categoryId', controller Laravel Anda harus memeriksa request('categoryId') dan menambahkan klausa where pada query.

​

7. Contoh Penggunaan

<!-- HalamanJadwalSaya.vue -->
<template>
  <div class="container-fluid mt-4">
    <SidebarTreeCalendar
      sidebar-title="Proyek"
      content-title="Jadwal untuk Proyek:"
      nodes-url="/api/proyek/tree"
      events-endpoint="/api/jadwal/events"
      resources-endpoint="/api/jadwal/resources"
      filter-key="projectId"

      @event-click="bukaModalEvent"
      @edit-node="bukaEditorProyek"

      <!-- Prop penerus untuk ResourceTimelineView -->
      :row-height="60"
    />
  </div>
</template>

<script>
import SidebarTreeCalendar from './components/SidebarTreeCalendar.vue';

export default {
  components: { SidebarTreeCalendar },
  methods: {
    bukaModalEvent(event) {
      // Logika untuk membuka modal dengan detail event
      console.log('Membuka detail untuk event:', event.title);
    },
    bukaEditorProyek(node) {
      // Logika untuk membuka form/modal untuk mengedit proyek yang dipilih
      console.log('Mengedit proyek:', node.name);
    }
  }
}
</script>