search

syncfusion / ej2-locale

Translation texts for Essential JS 2 components in multiple languages
Other
38 stars 151 forks source link

Add and Edit button doesnt work #116

Closed AbigailSlz closed 2 years ago

AbigailSlz commented 2 years ago

Hi, I'm trying to translate gantt to spanish in Angular.

Translation works fine, but when I click on add and edit button the console show this error:

ERROR TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at DatePicker.getCultureValues (ej2-calendars.es2015.js:272:34)
    at DatePicker.createContentHeader (ej2-calendars.es2015.js:307:51)
    at DatePicker.createContent (ej2-calendars.es2015.js:256:14)
    at DatePicker.createContent (ej2-calendars.es2015.js:2181:15)
    at DatePicker.render (ej2-calendars.es2015.js:124:14)
    at DatePicker.render (ej2-calendars.es2015.js:2038:15)
    at DatePicker.disabledDates (ej2-calendars.es2015.js:4655:15)
    at DatePicker.updateInput (ej2-calendars.es2015.js:3235:18)
    at DatePicker.initialize (ej2-calendars.es2015.js:3172:14)

Here is my code example:


import {L10n, setCulture} from '@syncfusion/ej2-base';
import { Component, OnInit, ViewChild} from '@angular/core';
import { extend } from '@syncfusion/ej2-base';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { SelectEventArgs, RemoveEventArgs  } from '@syncfusion/ej2-dropdowns';
import { MultiSelectComponent } from '@syncfusion/ej2-angular-dropdowns';
import { ToolbarItem, EditSettingsModel } from '@syncfusion/ej2-angular-gantt';

L10n.load({
  "es": {
      "gantt": {
          "emptyRecord": "No hay registros que mostrar",
          "id": "CARNÉ DE IDENTIDAD",
          "name": "Nombre",
          "startDate": "Fecha de inicio",
          "endDate": "Fecha final",
          "duration": "Duración",
          "progress": "Progreso",
          "dependency": "Dependencia",
          "notes": "Notas",
          "baselineStartDate": "Fecha de inicio de línea de base",
          "baselineEndDate": "Fecha de finalización de línea de base",
          "taskMode": "Modo de Tarea",
          "changeScheduleMode": "Cambiar modo de programación",
          "subTasksStartDate": "Fecha de inicio de subtareas",
          "subTasksEndDate": "Fecha de finalización de subtareas",
          "scheduleStartDate": "Fecha de inicio del horario",
          "scheduleEndDate": "Fecha de finalización del horario",
          "auto": "Auto",
          "manual": "Manual",
          "type": "Tipo",
          "offset": "Compensar",
          "resourceName": "Recursos",
          "resourceID": "ID de recurso",
          "day": "día",
          "hour": "hora",
          "minute": "minuto",
          "days": "dias",
          "hours": "horas",
          "minutes": "minutos",
          "generalTab": "General",
          "customTab": "Columnas personalizadas",
          "writeNotes": "Escribe notas",
          "addDialogTitle": "Nueva tarea",
          "editDialogTitle": "Información de tarea",
          "saveButton": "Salvar",
          "add": "Añadir",
          "edit": "Editar",
          "update": "Actualizar",
          "delete": "Eliminar",
          "cancel": "Cancelar",
          "search": "Buscar",
          "task": " tarea",
          "tasks": " Tareas",
          "zoomIn": "Acercarse",
          "zoomOut": "Disminuir el zoom",
          "zoomToFit": "Zoom para ajustar",
          "excelExport": "Exportación Excel",
          "csvExport": "Exportación CSV",
          "expandAll": "Expandir todo",
          "collapseAll": "Desplegar todo",
          "nextTimeSpan": "Próximo intervalo de tiempo",
          "prevTimeSpan": "Periodo de tiempo anterior",
          "okText": "Okay",
          "confirmDelete": "¿Estás seguro de que deseas eliminar el registro?",
          "from": "Desde",
          "to": "A",
          "taskLink": "Enlace de tareas",
          "lag": "Retraso",
          "start": "comienzo",
          "finish": "Terminar",
          "enterValue": "Ingrese el valor",
          "taskBeforePredecessor_FS": "Movió '{0}' para comenzar antes de que '{1}' finalice y las dos tareas estén vinculadas. Como resultado, los enlaces no pueden ser respetados. Seleccione una acción a continuación para realizar",
          "taskAfterPredecessor_FS": "Se movió '{0}' lejos de '{1}' y las dos tareas están vinculadas. Como resultado, los enlaces no pueden ser respetados. Seleccione una acción a continuación para realizar",
          "taskBeforePredecessor_SS": "Movió '{0}' para comenzar antes de que comience '{1}' y las dos tareas estén vinculadas. Como resultado, los enlaces no pueden ser respetados. Seleccione una acción a continuación para realizar",
          "taskAfterPredecessor_SS": "Movió '{0}' para comenzar después de que '{1}' comience y las dos tareas estén vinculadas. Como resultado, los enlaces no pueden ser respetados. Seleccione una acción a continuación para realizar",
          "taskBeforePredecessor_FF": "Movió '{0}' para finalizar antes de que '{1}' finalice y las dos tareas estén vinculadas. Como resultado, los enlaces no pueden ser respetados. Seleccione una acción a continuación para realizar",
          "taskAfterPredecessor_FF": "Movió '{0}' para finalizar después de que '{1}' finalice y las dos tareas estén vinculadas. Como resultado, los enlaces no pueden ser respetados. Seleccione una acción a continuación para realizar",
          "taskBeforePredecessor_SF": "Se movió '{0}' lejos de '{1}' para comenzar y las dos tareas están vinculadas. Como resultado, los enlaces no pueden ser respetados. Seleccione una acción a continuación para realizar",
          "taskAfterPredecessor_SF": "Movió '{0}' para finalizar después de que '{1}' comience y las dos tareas estén vinculadas. Como resultado, los enlaces no pueden ser respetados. Seleccione una acción a continuación para realizar",
          "taskInformation": "Información de tarea",
          "deleteTask": "Eliminar tarea",
          "deleteDependency": "Eliminar dependencia",
          "convert": "Convertir",
          "save": "Salvar",
          "above": "Encima",
          "below": "Abajo",
          "child": "Niño",
          "milestone": "Hito",
          "toTask": "A la tarea",
          "toMilestone": "Al hito",
          "eventMarkers": "Marcadores de eventos",
          "leftTaskLabel": "Etiqueta de tarea izquierda",
          "rightTaskLabel": "Etiqueta de tarea correcta",
          "timelineCell": "Celda de línea de tiempo",
          "confirmPredecessorDelete": "¿Seguro que quieres eliminar el enlace de dependencia?",
          "unit": "Unidad",
          "work": "Trabajo",
          "taskType": "Tipo de tarea",
          "unassignedTask": "Tarea no asignada",
          "group": "Grupo",
          "indent": "Sangrar",
          "outdent": "Outdent",
          "segments": "Segmentos",
          "splitTask": "Tarea dividida",
          "mergeTask": "Combinar tarea",
          "left": "Izquierda",
          "right": "Correcto"
      },
  }
});

@Component({
  selector: 'app-pt-tareas-gantt',
  templateUrl: './pt-tareas-gantt.component.html',
  styleUrls: ['./pt-tareas-gantt.component.css']
})
export class PtTareasGanttComponent implements OnInit {

// Data for Gantt
public data: object[];
public taskSettings: object;
public timelineSettings: object;
public editSettings: EditSettingsModel;
public toolbar: ToolbarItem[];
public columns: object[];
public labelSettings: object;
public resources: object[];
public resourceFields: object;

public workWeek: string[];
public dropDownData: Object;
public dropDownFields: Object;
public mode: string;
 workingDays:any = [];
@ViewChild('ganttObj')
public ganttObj: GanttComponent;
@ViewChild('WorkingDaysObj')
public WorkingDaysObj: MultiSelectComponent;
  constructor() { }

  ngOnInit(): void {

    this.mode = 'CheckBox';
    this.dropDownFields = { text: 'day', value: 'id'};
    this.dropDownData= [   { id: 'Sunday', day: 'Sunday'},
    { id: 'Monday', day: 'Monday' },
    { id: 'Tuesday', day: 'Tuesday' },
    { id: 'Wednesday', day: 'Wednesday' },
    { id: 'Thursday', day: 'Thursday' },
    { id: 'Friday', day: 'Friday' },
    { id: 'Saturday', day: 'Saturday' }];
    this.workWeek = ['Monday','Tuesday','Wednesday','Thursday','Friday'];

    this.data =  [
      {
          TaskID: 1,
          TaskName: 'Project Initiation',
          StartDate: new Date('04/02/2019'),
          EndDate: new Date('04/21/2019'),
          subtasks: [
              {  TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, resources: [1] },
              { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50,  resources: [2, 3, 5]  },
              { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
          ]
      },
      {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            {  TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, resources: [1] },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50,  resources: [2, 3, 5]  },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
      },
      {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            {  TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, resources: [1] },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50,  resources: [2, 3, 5]  },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
      },
      {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            {  TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, resources: [1] },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50,  resources: [2, 3, 5]  },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
      },
      {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            {  TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, resources: [1] },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50,  resources: [2, 3, 5]  },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
      },
      {
          TaskID: 5,
          TaskName: 'Project Estimation',
          StartDate: new Date('04/02/2019'),
          EndDate: new Date('04/21/2019'),
          subtasks: [
              { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
              { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
              { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
          ]
      },
  ];

  this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      endDate: 'EndDate',
      duration: 'Duration',
      progress: 'Progress',
      dependency: 'Predecessor',
      resourceInfo: 'resources',
      child: 'subtasks',
  };

  this.timelineSettings = {
    topTier: {
        format: 'MMM dd, yyyy',
        unit: 'Week',
    },
    bottomTier: {
        unit: 'Day',
    },
  };

  this.columns = [
    { field: 'TaskID',  headerText: 'ID', width: 80 },
    { field: 'TaskName', headerText: 'Actividad', width: '250', clipMode: 'EllipsisWithTooltip' },
    { field: 'StartDate', headerText: 'Fecha Inicio' },
    { field: 'Duration', headerText: 'Duración' },
    { field: 'EndDate', headerText: 'Fecha Compromiso' },
    { field: 'resources', headerText: 'Responsables' }
  ];

  this.labelSettings = {
    rightLabel: 'resources',
    taskLabel: '${Progress}%'
  };

  this.editSettings = {
    allowAdding: true,
    allowEditing: true,
    allowDeleting: true,
    allowTaskbarEditing: true,
    showDeleteConfirmDialog: true
  };

  this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Search',];

  this.resources = [
      { resourceId: 1, resourceName: 'Abigail Salazar' },
      { resourceId: 2, resourceName: 'Rose Fuller' },
      { resourceId: 3, resourceName: 'Margaret Buchanan' },
      { resourceId: 4, resourceName: 'Fuller King' },
      { resourceId: 5, resourceName: 'Davolio Fuller' },
      { resourceId: 6, resourceName: 'Van Jack' },
      { resourceId: 7, resourceName: 'Fuller Buchanan' },
      { resourceId: 8, resourceName: 'Jack Davolio' },
      { resourceId: 9, resourceName: 'Tamer Vinet' },
      { resourceId: 10, resourceName: 'Vinet Fuller' },
      { resourceId: 11, resourceName: 'Bergs Anton' },
      { resourceId: 12, resourceName: 'Construction Supervisor' }
    ];

    this.resourceFields = {
      id: 'resourceId',
      name: 'resourceName'
    };

    setCulture('es');
}

  select (args: SelectEventArgs) : void {
    this.workingDays = 7;
    this.workingDays = extend([], this.WorkingDaysObj.value, [], true);
    this.workingDays.push(args.item.innerText);
    this.ganttObj.workWeek = this.workingDays;      
  }
  remove (args: RemoveEventArgs) : void {
    var index = this.ganttObj.workWeek.indexOf(args.item.innerText);
      this.workingDays = 7;
      if (index !== -1) {
          this.workingDays = this.WorkingDaysObj.value;
          this.ganttObj.workWeek = this.workingDays;
      }     
  }   
}

image

image

Without translation image

Could you help me, please. Thanks!

MonishaSivanthilingam commented 2 years ago

Hi AbigailSlz,

Greetings from Syncfusion support.

The issue you reported can be resolved in the sample level itself. You have to load the timeZoneNames, numbers and ca-gregorian json files to translate the calendar and for editing operations to work without any issues. Please follow the below documentation link to load these files in your application.

Documentation: https://ej2.syncfusion.com/angular/documentation/common/globalization/internationalization/

Sample: https://stackblitz.com/edit/globalization-nhgxdz-uw6tra?file=app.component.ts

Regards, Monisha.

AbigailSlz commented 2 years ago

Thanks!