Templating

wildflower.component('todo-template-demo', {
    state: {
        todos: [
            { text: 'Learn WildflowerJS templates', completed: false, number: 1 },
            { text: 'Build an awesome app', completed: false, number: 2 },
            { text: 'Deploy to production', completed: false, number: 3 }
        ],
        newTodo: ''
    },
    
    computed: {
        totalCount() {
            return this.todos.length
        },

        completedCount() {
            return this.todos.filter(todo => todo.completed).length
        },

        remainingCount() {
            return this.totalCount - this.completedCount
        },

        isEmpty() {
            return this.todos.length === 0
        }
    },
    
    addTodo() {
        const text = this.newTodo.trim()
        if (text) {
            this.todos.push({
                text: text,
                completed: false,
                number: this.todos.length + 1
            })
            this.newTodo = ''
        }
    },
    
    removeTodo(event, element, details) {
        // Use details.index from the framework's action context
        this.todos.splice(details.index, 1)
        // Renumber remaining todos
        this.todos.forEach((todo, i) => {
            todo.number = i + 1
        })
    },

    addSampleTodos() {
        const samples = [
            'Review code changes',
            'Update documentation',
            'Test new features',
            'Fix reported bugs',
            'Optimize performance'
        ]

        samples.forEach(text => {
            this.todos.push({
                text: text,
                completed: Math.random() > 0.7,
                number: this.todos.length + 1
            })
        })
    },

    toggleAllComplete() {
        const allCompleted = this.todos.every(todo => todo.completed)
        this.todos.forEach(todo => {
            todo.completed = !allCompleted
        })
    },

    clearCompleted() {
        this.todos = this.todos.filter(todo => !todo.completed)
    },

    handleKeyup(event) {
        if (event.key === 'Enter') {
            this.addTodo()
        }
    }
})

wildflower.component('organization-demo', {
    state: {
        // Numbers are IDs, so they are assigned once from these counters
        // and never reused or reshuffled by a delete.
        nextDepartmentNumber: 3,
        departments: [
            {
                name: 'Engineering',
                manager: 'Sarah Chen',
                budget: 500,
                number: 1,
                nextEmployeeNumber: 3,
                employees: [
                    { name: 'Alex Rodriguez', role: 'Senior Dev', salary: 120, initials: 'AR', color: '#4CAF50', number: 1 },
                    { name: 'Jamie Park', role: 'Frontend Dev', salary: 95, initials: 'JP', color: '#2196F3', number: 2 }
                ]
            },
            {
                name: 'Design',
                manager: 'Jordan Kim',
                budget: 300,
                number: 2,
                nextEmployeeNumber: 2,
                employees: [
                    { name: 'Casey Johnson', role: 'UX Designer', salary: 85, initials: 'CJ', color: '#FF9800', number: 1 }
                ]
            }
        ]
    },
    
    computed: {
        departmentCount() {
            return this.departments.length
        },

        totalEmployees() {
            return this.departments.reduce((sum, dept) => sum + dept.employees.length, 0)
        },

        companySize() {
            const total = this.totalEmployees
            if (total < 10) return 'Startup'
            if (total < 50) return 'Small'
            if (total < 200) return 'Medium'
            return 'Large'
        },
        
        noData() {
            return this.departments.length === 0
        },
        
        // Department-level computed properties. In a list row, a computed
        // receives the row's item (here, the department) as its argument.
        employeeCount(dept) {
            return dept.employees.length
        },

        averageSalary(dept) {
            const employees = dept.employees
            if (employees.length === 0) return '0'
            const total = employees.reduce((sum, emp) => sum + emp.salary, 0)
            return Math.round(total / employees.length)
        },

        isEmpty(dept) {
            return dept.employees.length === 0
        }
    },
    
    addDepartment() {
        const deptNames = ['Marketing', 'Sales', 'HR', 'Finance', 'Operations', 'Legal', 'Support']
        const managers = ['Alex Smith', 'Taylor Brown', 'Morgan Davis', 'Jordan Wilson', 'Casey Miller']
        const budgets = [200, 300, 400, 500, 600]
        
        const name = deptNames[Math.floor(Math.random() * deptNames.length)]
        const manager = managers[Math.floor(Math.random() * managers.length)]
        const budget = budgets[Math.floor(Math.random() * budgets.length)]
        
        // Immutable update: create new departments array with new department
        const newDepartment = {
            name: name,
            manager: manager,
            budget: budget,
            employees: [],
            number: this.nextDepartmentNumber,
            nextEmployeeNumber: 1
        }

        this.nextDepartmentNumber++
        this.departments = [...this.departments, newDepartment]
    },
    
    addEmployee(event, element, details) {
        // Use details.index for the department index from the framework's action context
        this.addEmployeeToDepartment(details.index)
    },

    addEmployeeToFirst() {
        if (this.departments.length > 0) {
            this.addEmployeeToDepartment(0)
        }
    },

    addEmployeeToDepartment(deptIndex) {
        const names = ['Riley Johnson', 'Avery Williams', 'Quinn Brown', 'Dakota Smith', 'River Jones']
        const roles = ['Developer', 'Designer', 'Analyst', 'Manager', 'Specialist', 'Coordinator']
        const colors = ['E91E63', '9C27B0', 'FF5722', '795548', '607D8B']

        const name = names[Math.floor(Math.random() * names.length)]
        const role = roles[Math.floor(Math.random() * roles.length)]
        const color = colors[Math.floor(Math.random() * colors.length)]
        const salary = Math.floor(Math.random() * 80) + 60
        const initials = name.split(' ').map(n => n[0]).join('')

        // Create new employee. The ID comes from the department's counter,
        // never from array length: length + 1 collides after a delete.
        const dept = this.departments[deptIndex]
        const newEmployee = {
            name: name,
            role: role,
            salary: salary,
            initials: initials,
            color: '#' + color,
            number: dept.nextEmployeeNumber
        }

        // Immutable update: new employees array, counter advanced
        this.departments = [
            ...this.departments.slice(0, deptIndex),
            {
                ...dept,
                employees: [...dept.employees, newEmployee],
                nextEmployeeNumber: dept.nextEmployeeNumber + 1
            },
            ...this.departments.slice(deptIndex + 1)
        ]
    },

    removeEmployee(event, element, details) {
        // Use details.index for employee index and details.parent.index for department
        const empIndex = details.index
        const deptIndex = details.parent.index

        // Create new employees array with the employee removed. IDs are
        // stable: the remaining employees keep the numbers they had.
        const currentEmployees = this.departments[deptIndex].employees
        const newEmployees = currentEmployees
            .filter((_, eIndex) => eIndex !== empIndex)

        // Update the specific department with new employees array
        this.departments = [
            ...this.departments.slice(0, deptIndex),
            { ...this.departments[deptIndex], employees: newEmployees },
            ...this.departments.slice(deptIndex + 1)
        ]
    },

    removeDepartment(event, element, details) {
        // Use details.index from the framework's action context
        const deptIndex = details.index
        // Immutable update: create new departments array with the department
        // removed. Department numbers are stable IDs too.
        this.departments = this.departments
            .filter((_, index) => index !== deptIndex)
    },

    clearAll() {
        // Immutable update: replace with new empty array
        this.departments = []
    }
})