Module LocaleReceiver not found ???

siracusa-lucas commented 1 year ago

Checklist

[X] I've looked through the README
[X] I've verified that I'm running react-big-scheduler-stch version 1.2.2

Please make sure the question is worded well enough to be understood

Any ideas why I get this error ? I'm using the same config than the open issue named "dayStopTo not working!"

ERROR in ./node_modules/react-big-scheduler-stch/node_modules/antd/locale/LocaleReceiver.js 1:0-56 Module not found: Error: Can't resolve '../lib/locale/LocaleReceiver' in 'C:\repos\NSI-D365-Stage_2023\PowerApps\NSI.PA.CE.WebResources\Scheduler\node_modules\react-big-scheduler-stch\node_modules\antd\locale' resolve '../lib/locale/LocaleReceiver' in 'C:\repos\NSI-D365-Stage_2023\PowerApps\NSI.PA.CE.WebResources\Scheduler\node_modules\react-big-scheduler-stch\node_modules\antd\locale' using description file: C:\repos\NSI-D365-Stage_2023\PowerApps\NSI.PA.CE.WebResources\Scheduler\node_modules\react-big-scheduler-stch\node_modules\antd\package.json (relative path: ./locale) Field 'browser' doesn't contain a valid alias configuration using description file: C:\repos\NSI-D365-Stage_2023\PowerApps\NSI.PA.CE.WebResources\Scheduler\node_modules\react-big-scheduler-stch\node_modules\antd\package.json (relative path: ./lib/locale/LocaleReceiver) no extension Field 'browser' doesn't contain a valid alias configuration C:\repos\NSI-D365-Stage_2023\PowerApps\NSI.PA.CE.WebResources\Scheduler\node_modules\react-big-scheduler-stch\node_modules\antd\lib\locale\LocaleReceiver doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration C:\repos\NSI-D365-Stage_2023\PowerApps\NSI.PA.CE.WebResources\Scheduler\node_modules\react-big-scheduler-stch\node_modules\antd\lib\locale\LocaleReceiver.ts doesn't exist .tsx Field 'browser' doesn't contain a valid alias configuration C:\repos\NSI-D365-Stage_2023\PowerApps\NSI.PA.CE.WebResources\Scheduler\node_modules\react-big-scheduler-stch\node_modules\antd\lib\locale\LocaleReceiver.tsx doesn't exist .js Field 'browser' doesn't contain a valid alias configuration C:\repos\NSI-D365-Stage_2023\PowerApps\NSI.PA.CE.WebResources\Scheduler\node_modules\react-big-scheduler-stch\node_modules\antd\lib\locale\LocaleReceiver.js doesn't exist .jsx Field 'browser' doesn't contain a valid alias configuration C:\repos\NSI-D365-Stage_2023\PowerApps\NSI.PA.CE.WebResources\Scheduler\node_modules\react-big-scheduler-stch\node_modules\antd\lib\locale\LocaleReceiver.jsx doesn't exist as directory C:\repos\NSI-D365-Stage_2023\PowerApps\NSI.PA.CE.WebResources\Scheduler\node_modules\react-big-scheduler-stch\node_modules\antd\lib\locale\LocaleReceiver doesn't exist

siracusa-lucas commented 1 year ago

The same Typescript config*

lucianturcu commented 1 year ago

I'm having the same issue at the moment. Couldn't figure out a fix so far. :(

hbatalhaStch commented 1 year ago

The same Typescript config*

The function component? Please post the code here.

@lucianturcu could you post the code here?

siracusa-lucas commented 1 year ago

I send you all the files included in your project that i took :

### App.tsx

import * as React from "react";
import Calendar from "./Components/JS/Calendar";

const App = (_context: any) => {
  return (
    <>
      <Calendar resources={[]} events={[]} ></Calendar>
      {/* context={_context} */}
    </>
  );
};

export default App;

### Calendar.tsx

import dayjs, { Dayjs } from "dayjs";
import React, { Component } from "react";
import "react-big-scheduler-stch/lib/css/style.css";
import Scheduler, {
  EventItem,
  Resource,
  SchedulerData,
  SchedulerDataBehaviors,
  SchedulerDataConfig,
  SchedulerProps,
  View,
  ViewType,
} from "react-big-scheduler-stch";

export interface SState {
  viewModel: SchedulerData;
}

interface IProps<T extends EventItem = EventItem>
  extends Omit<
    SchedulerProps<T>,
    | "schedulerData"
    | "prevClick"
    | "nextClick"
    | "onSelectDate"
    | "onViewChange"
    | "toggleExpandFunc"
  > {
  date?: string | Dayjs;
  viewType?: ViewType;
  showAgenda?: boolean;
  isEventPerspective?: boolean;
  newConfig?: SchedulerDataConfig;
  newBehaviours?: SchedulerDataBehaviors;
  schedulerDataConfig?: SchedulerDataConfig;
  resources: Resource[];
  events: EventItem[];
  onYearChange?: (year: number) => void;
}

export default class BigScheduler<
  T extends EventItem = EventItem
> extends Component<IProps<T>, SState> {
  private viewDate = dayjs();

  constructor(props: any) {
    super(props);
    let schedulerData = new SchedulerData(
      props.date ?? dayjs(),
      props.viewType ?? ViewType.Month,
      props.showAgenda ?? false,
      props.isEventPerspective ?? false,
      props.schedulerDataConfig
    );
    schedulerData.setResources(props.resources);
    schedulerData.setEvents(props.events);
    schedulerData.setSchedulerLocale("fr"); // this uses dayjs, but it doesn't require dayjs to be installed as its called dynamically
    schedulerData.setCalendarPopoverLocale("fr_BE");
    this.state = {
      viewModel: schedulerData,
    };
  }

  render() {
    const { viewModel } = this.state;
    return (
      <Scheduler
        schedulerData={viewModel}
        prevClick={this.prevClick}
        nextClick={this.nextClick}
        onSelectDate={this.onSelectDate}
        onViewChange={this.onViewChange}
        toggleExpandFunc={this.toggleExpandFunc}
        {...this.props}
      />
    );
  }

  onDateChange = (schedulerData: SchedulerData) => {
    const newDate = schedulerData.getViewStartDate();
    if (this.viewDate !== newDate) {
      if (this.viewDate.year() !== newDate.year()) {
        const { onYearChange } = this.props;
        if (onYearChange) {
          onYearChange(newDate.year());
        }
      }
      this.viewDate = newDate;
    }
  };

  prevClick = (schedulerData: SchedulerData) => {
    schedulerData.prev();
    this.onDateChange(schedulerData);
    schedulerData.setEvents(this.props.events);
    this.setState({
      viewModel: schedulerData,
    });
  };

  nextClick = (schedulerData: SchedulerData) => {
    schedulerData.next();
    this.onDateChange(schedulerData);
    schedulerData.setEvents(this.props.events);
    this.setState({
      viewModel: schedulerData,
    });
  };

  onViewChange = (schedulerData: SchedulerData, view: View) => {
    const start = new Date();
    schedulerData.setViewType(
      view.viewType,
      view.showAgenda,
      view.isEventPerspective
    );
    schedulerData.setEvents(this.props.events);
    this.setState({
      viewModel: schedulerData,
    });
  };

  onSelectDate = (schedulerData: SchedulerData, date: string) => {
    schedulerData.setDate(date);
    this.onDateChange(schedulerData);
    schedulerData.setEvents(this.props.events);
    this.setState({
      viewModel: schedulerData,
    });
  };

  toggleExpandFunc = (schedulerData: SchedulerData, slotId: string) => {
    schedulerData.toggleExpandStatus(slotId);
    this.setState({
      viewModel: schedulerData,
    });
  };
}

### withDndContext.js

import * as React from "react";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

export default (Component) => {
  return (props) => (
    <DndProvider backend={HTML5Backend}>
      <Component {...props} />
    </DndProvider>
  );
};

lucianturcu commented 1 year ago

const resources = DemoData.resources;
const events = DemoData.projects;
const avatars = DemoData.avatars;

const Calendar = () => {
  const [schedulerData, setSchedulerData] = useState<SchedulerData>();

  useEffect(() => {
    const date = dayjs();
    const sd = new SchedulerData(date, ViewType.Month);
    sd.setResources(resources);
    sd.setEvents(events);

    setSchedulerData(sd);
  }, []);

// a bunch of onStuff methods which I'll omit for clarity....

  return (
    <div>
      <div className="header-section">
        <span>Resources Timeline</span>
      </div>
      <div>
        {schedulerData && (
          <Scheduler
            schedulerData={schedulerData}
            prevClick={prevClick}
            nextClick={nextClick}
            onSelectDate={onSelectDate}
            onViewChange={onViewChange}
            eventItemClick={eventClicked}
            viewEventClick={ops1}
            viewEventText="Ops 1"
            viewEvent2Text="Ops 2"
            viewEvent2Click={ops2}
            updateEventStart={updateEventStart}
            updateEventEnd={updateEventEnd}
            moveEvent={moveEvent}
            newEvent={newEvent}
            eventItemTemplateResolver={eventItemTemplateResolver}
            nonAgendaCellHeaderTemplateResolver={nonAgendaCellHeaderTemplateResolver}
            slotItemTemplateResolver={slotItemTemplateResolver}
          ></Scheduler>
        )}
      </div>
    </div>
  );
};

export default withDragDropContext(Calendar);

I hope this helps....

siracusa-lucas commented 1 year ago

That's worse and i don't know why haha... I can't even use the calendar functions for event or even use the drag&drop etc Can you help me with this problem ? I want to create a basic scheduler and show some resources and bookings and play with events(create, delete, update) , some views(days, month, year) i have the library and the functions are there but nothing works. I have a beginning and i'm stuck for a long time on it(the code is basically from the StephenChou's repository) :

Calendar.tsx

import * as React from "react";
import { useEffect, useState } from "react";
import Wrapper from "../Helpers/Wrapper";

import Scheduler, { SchedulerData, ViewTypes } from "react-big-scheduler";
import { DATE_FORMAT, DATETIME_FORMAT } from "../Helpers/Constants";
import moment from "moment";
import { IInputs } from "../../generated/ManifestTypes";
import "react-big-scheduler/lib/css/style.css";

// @ts-ignore
import withDragDropContext from "./withDnDContext";
import ToolsBox from "./ToolsBox";
import Booking from "./Booking";
import Card from "../Helpers/Card";

// La liste qui sera envoyée sur le calendrier
export interface IResource {
  name: string;
  type: string | undefined;
  id: string;
}

// La liste qui sera envoyée sur la table des bookings
export interface IBooking {
  name: string;
  time: string | undefined | number;
  id: string | Date;
}

// Liste qui va contenir les résultats de la requête
export interface IResponseBag {
  responses: any[];
}

// Fonction d'initialisation du scheduler
function createSchedulerData(): SchedulerData {
  const date = new Date().toUTCString();
  return new SchedulerData(
    moment().format(DATE_FORMAT),
    ViewTypes.Day,
    false,
    false,
    {
      resourceName: "Resources",
      dayStartFrom: 0,
      dayStopTo: 23,
    }
  );
}

// Propriétés
interface IProps {
  context: ComponentFramework.Context<IInputs>;
}

const Calendar = (props: IProps) => {
  // VARIABLES
  const [compteurFiltre, setCompteurFiltre] = useState<boolean>(false);

  // Liste des resources
  const [resources, setResources] = useState([] as IResource[]);

  // Liste des bookings
  const [bookings, setBooking] = useState([] as IBooking[]);

  // Initialisation du tableau des resources => Resources Bag
  let resourceBag: IResponseBag = {
    responses: [],
  };

  // Initialisation du tableau des  => Resources Bag
  let bookingBag: IResponseBag = {
    responses: [],
  };

  // Appelé une fois quand le composant est chargé, le tableau définit quels champs peut activer les méthodes
  useEffect(() => {
    // debugger;
    retrieveResources(props.context);
    retrieveBookings(props.context);
  }, []);

  // MÉTHODES POUR LES DONNÉES

  const retrieveResources = async (
    context: ComponentFramework.Context<IInputs>
  ) => {
    console.log("RetrieveData resources Function - Start");
    try {
      // Appel de l'API et récupération des resources actives de la table Resource
      // La requête est filtrée sur les resources actives
      const result = await context.webAPI.retrieveMultipleRecords(
        "varnsipa_resource",
        `?$filter=statecode eq 0&$select=varnsipa_name,varnsipa_resourcetype`
      );

      // On récupère dans un tableau resourceBag les résultats de la requête
      resourceBag.responses = result.entities;

      // for (let i = 0; i < resourceBag.responses.length; i++) {
      //   console.log(resourceBag.responses[i]);
      // }

      transformLoadedResourcesTableData();
    } catch (error: any) {
      console.log(error);
    }
  };

  const retrieveBookings = async (
    context: ComponentFramework.Context<IInputs>
  ) => {
    console.log("RetrieveData bookings Function - Start");
    try {
      // Appel de l'API et récupération des bookings de la table Bookings
      const result = await context.webAPI.retrieveMultipleRecords(
        "varnsipa_booking",
        `?$select=varnsipa_name,varnsipa_duration,varnsipa_duedate`
      );

      // On récupère dans un tableau bookingBag les résultats de la requête
      bookingBag.responses = result.entities;

      for (let i = 0; i < bookingBag.responses.length; i++) {
        console.log(bookingBag.responses[i]);
      }

      transformLoadedBookingsTableData();
    } catch (error: any) {
      console.log(error);
    }
  };

  // MÉTHODES DE TRANSFERT DES DONNÉES DU TABLEAU CONTENANT VERS LE TABLEAU QUI AFFICHE
  const transformLoadedResourcesTableData = () => {
    const resourceGridArray: IResource[] = resourceBag.responses.map((e) => {
      return {
        name: e["varnsipa_name"],
        type: e[
          "varnsipa_resourcetype@OData.Community.Display.V1.FormattedValue"
        ], // Sert à récupérer la valeur et pas le nombre associé à cette valeur
        id: e["varnsipa_resourceid"],
      };
    });

    console.log(resourceGridArray);
    setResources(resourceGridArray);
  };

  const transformLoadedBookingsTableData = () => {
    const bookingGridArray: IBooking[] = bookingBag.responses.map((e) => {
      return {
        name: e["varnsipa_name"],
        time: e["varnsipa_duration"],
        id: e["varnsipa_duedate"].format("dd/mm/yyyy"),
      };
    });
    setBooking(bookingGridArray);

    return bookings;
  };
  console.log(bookings);

  // On initialise le calendrier
  const schedulerData = createSchedulerData();

  schedulerData.setResources(resources);

  // Filtrer les ressources
  const [filterResource, setFilterResource] = useState("");

  // On trigger la fonction à chaque frappe au clavier sur la barre de recherche à partir de 3 caractères minimums
  const searchOnChange = (valueFilter: String) => {
    setFilterResource(valueFilter.trim());
  };

  // On filtre les ressources via la barre de recherche
  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log("Checking filter length for resources");

      let filter = filterResource.trim().length;

      if (filter > 2 && filter <= 10) {
        console.log(filterResource);
        console.log(" => longueur : " + filterResource.trim().length);
      }
    }, 1000);
    return () => {
      console.log("CLEANUP");
      clearTimeout(identifier);
    };
  }, [filterResource]);

  const resourcesfilter: IResource[] = resources
    .filter((value: any) => {
      return value.name.toLowerCase().includes(filterResource.toLowerCase());
    })
    .map((val: any) => {
      return {
        name: val.name,
        type: val.type,
        id: val.id,
      };
    });

  for (let i = 0; i < resourcesfilter.length; i++) {
    console.log(
      "Les ressources = " + resourcesfilter[i].name + resourcesfilter[i].type
    );
    setCompteurFiltre(true);
  }

  if (compteurFiltre == true) {
    setResources(resourcesfilter);
    schedulerData.setResources(resources);
    setCompteurFiltre(false);
  }

  //Le tableau des événements doit être filtré par ordre ascendant à l'aide de la propriété event.start, sinon il va avoir des erreurs de rendu
  let events = [
    {
      id: 1,
      start: "2023-03-27 15:30:00",
      end: "2023-03-27 17:00:00",
      resourceId: "r0",
      title: "I am here",
      bgColor: "#D9D9D9",
    },
    {
      id: 2,
      start: "2023-03-07 16:00:00",
      end: "2023-03-07 16:30:00",
      resourceId: "r1",
      title: "I am resizable",
      // rrule: "FREQ=WEEKLY;DTSTART=20171219T013000Z;BYDAY=TU,FR",
    },
  ];
  // schedulerData.setEvents(events);

  // MÉTHODES CALENDRIER

  function prevClick(this: any): any {
    this.prev();
    this.events = [];
    this._createHeaders();
    this._createRenderData();
  }

  function nextClick(this: any): any {
    this.next();
    this.events = [];
    this._createHeaders();
    this._createRenderData();
  }

  return (
    <Wrapper>
      <>
        <ToolsBox></ToolsBox>
      </>
      <>
        <Card className="SearchAlignResources">
          <input
            type="search"
            placeholder="Search resources"
            max="10"
            pattern="/^[a-zA-Z]+$/"
            onChange={(e) => searchOnChange(e.target.value)}
          />
        </Card>
      </>
      <>
        <Scheduler
          schedulerData={schedulerData}
          prevClick={prevClick}
          nextClick={nextClick}
          onSelectDate={() => {}}
          onViewChange={() => {}}
          eventItemClick={() => {}}
        />
      </>
      <>
        <Booking></Booking>
      </>
    </Wrapper>
  );
};

export default withDragDropContext(Calendar);

App.tsx

import * as React from "react";
import Calendar from "./Components/JS/Calendar";

const App = (_context: any) => {
  return (
    <>
      <Calendar context={_context}></Calendar>
      {/*  */}
    </>
  );
};

export default App;

withDnDContext.js

import {DragDropContext} from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'

export default DragDropContext(HTML5Backend);

lucianturcu commented 1 year ago

When implementing the calendar as a functional component, you'll have to use Object.assign to assign new values to the schedulerData state variable. I had issues with the action functions as well initially.

  const updateSchedulerData = sd => {
    const nextSchedulerData = Object.assign(Object.create(Object.getPrototypeOf(sd)), sd);
    setSchedulerData(nextSchedulerData);
  };

  const prevClick = sd => {
    sd.prev();
    sd.setEvents(events);
    updateSchedulerData(sd);
  };

Overall I managed to make the calendar work, but I just keep receiving the LocaleReceiver error regardless of what I change in the implementation.

siracusa-lucas commented 1 year ago

Okey thank's for that, but where do setSchedulerData() come from ? Cause it doesn't exist in the library.

hbatalhaStch commented 1 year ago

@siracusa-lucas I just created a TS app and used the code you provided and worked well. Could you share your package.json file so I mimic better your project?

lucianturcu commented 1 year ago

@siracusa-lucas setSchedulerData is from the state variable.

  const [schedulerData, setSchedulerData] = useState<SchedulerData>();

@hbatalhaStch here's my package.json:

{
  "name": "capacity-planning-tool",
  "version": "0.0.1-SNAPSHOT",
  "private": true,
  "description": "Description for capacity-planning-tool",
  "license": "UNLICENSED",
  "scripts": {
    "app:start": "./mvnw",
    "backend:build-cache": "./mvnw dependency:go-offline",
    "backend:debug": "./mvnw -Dspring-boot.run.jvmArguments=\"-agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=*:8000\"",
    "backend:doc:test": "./mvnw -ntp javadoc:javadoc --batch-mode",
    "backend:info": "./mvnw -ntp enforcer:display-info --batch-mode",
    "backend:nohttp:test": "./mvnw -ntp checkstyle:check --batch-mode",
    "backend:start": "./mvnw -Dskip.installnodenpm -Dskip.npm",
    "backend:unit:test": "./mvnw -ntp -Dskip.installnodenpm -Dskip.npm verify --batch-mode -Dlogging.level.ROOT=OFF -Dlogging.level.org.zalando=OFF -Dlogging.level.tech.jhipster=OFF -Dlogging.level.com.auth0.flickr2=OFF -Dlogging.level.org.springframework=OFF -Dlogging.level.org.springframework.web=OFF -Dlogging.level.org.springframework.security=OFF",
    "build": "npm run webapp:prod --",
    "build-watch": "concurrently 'npm run webapp:build:dev -- --watch' npm:backend:start",
    "ci:backend:test": "npm run backend:info && npm run backend:doc:test && npm run backend:nohttp:test && npm run backend:unit:test -- -P$npm_package_config_default_environment",
    "ci:e2e:package": "npm run java:$npm_package_config_packaging:$npm_package_config_default_environment -- -Pe2e -Denforcer.skip=true",
    "ci:e2e:prepare": "npm run ci:e2e:prepare:docker",
    "ci:e2e:prepare:docker": "npm run docker:db:up && npm run docker:others:up && docker ps -a",
    "ci:e2e:run": "concurrently -k -s first \"npm run ci:e2e:server:start\" \"npm run e2e:headless\"",
    "preci:e2e:server:start": "npm run docker:db:await --if-present && npm run docker:others:await --if-present",
    "ci:e2e:server:start": "java -jar target/e2e.$npm_package_config_packaging --spring.profiles.active=e2e,$npm_package_config_default_environment -Dlogging.level.ROOT=OFF -Dlogging.level.org.zalando=OFF -Dlogging.level.tech.jhipster=OFF -Dlogging.level.com.auth0.flickr2=OFF -Dlogging.level.org.springframework=OFF -Dlogging.level.org.springframework.web=OFF -Dlogging.level.org.springframework.security=OFF --logging.level.org.springframework.web=ERROR",
    "ci:e2e:teardown": "npm run ci:e2e:teardown:docker",
    "ci:e2e:teardown:docker": "npm run docker:db:down --if-present && npm run docker:others:down && docker ps -a",
    "ci:frontend:test": "npm run webapp:build:$npm_package_config_default_environment && npm run test-ci",
    "ci:server:await": "echo \"Waiting for server at port $npm_package_config_backend_port to start\" && wait-on -t 180000 http-get://localhost:$npm_package_config_backend_port/management/health && echo \"Server at port $npm_package_config_backend_port started\"",
    "clean-www": "rimraf target/classes/static/app/{src,target/}",
    "cleanup": "rimraf target/classes/static/",
    "cypress": "cypress open --e2e",
    "docker:app:up": "docker-compose -f src/main/docker/app.yml up -d",
    "docker:db:down": "docker-compose -f src/main/docker/postgresql.yml down -v",
    "docker:db:up": "docker-compose -f src/main/docker/postgresql.yml up -d",
    "docker:keycloak:await": "echo \"Waiting for keycloak to start\" && wait-on -t 180000 http-get://localhost:9080/realms/jhipster && echo \"keycloak started\" || echo \"keycloak not running, make sure oauth2 server is running\"",
    "docker:keycloak:down": "docker-compose -f src/main/docker/keycloak.yml down -v",
    "docker:keycloak:up": "docker-compose -f src/main/docker/keycloak.yml up -d",
    "docker:others:await": "npm run docker:keycloak:await",
    "docker:others:down": "npm run docker:keycloak:down",
    "predocker:others:up": "",
    "docker:others:up": "npm run docker:keycloak:up",
    "e2e": "npm run e2e:cypress:headed --",
    "e2e:cypress": "cypress run --e2e --browser chrome --record ${CYPRESS_ENABLE_RECORD:-false}",
    "e2e:cypress:headed": "npm run e2e:cypress -- --headed",
    "e2e:dev": "concurrently -k -s first \"./mvnw\" \"npm run e2e\"",
    "e2e:devserver": "concurrently -k -s first \"npm run backend:start\" \"npm start\" \"wait-on -t 180000 http-get://localhost:9000 && npm run e2e:headless -- -c baseUrl=http://localhost:9000\"",
    "pree2e:headless": "npm run ci:server:await",
    "e2e:headless": "npm run e2e:cypress --",
    "java:docker": "./mvnw -ntp verify -DskipTests -Pprod jib:dockerBuild",
    "java:docker:arm64": "npm run java:docker -- -Djib-maven-plugin.architecture=arm64",
    "java:docker:dev": "npm run java:docker -- -Pdev,webapp",
    "java:docker:prod": "npm run java:docker -- -Pprod",
    "java:jar": "./mvnw -ntp verify -DskipTests --batch-mode",
    "java:jar:dev": "npm run java:jar -- -Pdev,webapp",
    "java:jar:prod": "npm run java:jar -- -Pprod",
    "java:war": "./mvnw -ntp verify -DskipTests --batch-mode -Pwar",
    "java:war:dev": "npm run java:war -- -Pdev,webapp",
    "java:war:prod": "npm run java:war -- -Pprod",
    "jest": "jest --coverage --logHeapUsage --maxWorkers=2 --config jest.conf.js",
    "jest:update": "npm run jest -- --updateSnapshot",
    "lint": "eslint . --ext .js,.ts,.jsx,.tsx",
    "lint:fix": "npm run lint -- --fix",
    "prepare": "husky install",
    "prettier:check": "prettier --check \"{,src/**/,webpack/,.blueprint/**/}*.{md,json,yml,html,cjs,mjs,js,ts,tsx,css,scss,java}\"",
    "prettier:format": "prettier --write \"{,src/**/,webpack/,.blueprint/**/}*.{md,json,yml,html,cjs,mjs,js,ts,tsx,css,scss,java}\"",
    "start": "npm run webapp:dev --",
    "start-tls": "npm run webapp:dev -- --env.tls",
    "pretest": "npm run lint",
    "test": "npm run jest --",
    "test-ci": "npm run lint && npm run jest:update --",
    "test:watch": "npm run jest -- --watch",
    "watch": "concurrently 'npm run start' npm:backend:start",
    "webapp:build": "npm run clean-www && npm run webapp:build:dev --",
    "webapp:build:dev": "webpack --config webpack/webpack.dev.js --env stats=minimal",
    "webapp:build:prod": "webpack --config webpack/webpack.prod.js --progress=profile",
    "webapp:dev": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --env stats=minimal",
    "webapp:dev-verbose": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --progress=profile --env stats=normal",
    "webapp:prod": "npm run clean-www && npm run webapp:build:prod --",
    "webapp:test": "npm run test --",
    "webpack-dev-server": "webpack serve"
  },
  "config": {
    "backend_port": "8080",
    "default_environment": "prod",
    "packaging": "jar"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@reduxjs/toolkit": "1.8.5",
    "axios": "0.27.2",
    "bootstrap": "5.2.0",
    "bootswatch": "5.2.0",
    "dayjs": "^1.11.7",
    "lodash": "4.17.21",
    "path-browserify": "1.0.1",
    "react": "18.2.0",
    "react-big-scheduler-stch": "^1.2.3",
    "react-dom": "18.2.0",
    "react-hook-form": "7.30.0",
    "react-jhipster": "0.22.0",
    "react-loadable": "5.5.0",
    "react-redux": "8.0.2",
    "react-redux-loading-bar": "5.0.4",
    "react-router-dom": "6.3.0",
    "react-toastify": "9.0.8",
    "react-transition-group": "4.4.5",
    "reactstrap": "9.1.4",
    "redux": "4.2.0",
    "redux-thunk": "2.4.1",
    "tslib": "2.4.0",
    "uuid": "8.3.2"
  },
  "devDependencies": {
    "@testing-library/react": "13.3.0",
    "@types/jest": "28.1.8",
    "@types/lodash": "4.14.184",
    "@types/node": "16.11.56",
    "@types/react": "18.0.18",
    "@types/react-dom": "18.0.6",
    "@types/react-redux": "7.1.24",
    "@types/redux": "3.6.31",
    "@types/webpack-env": "1.18.0",
    "@typescript-eslint/eslint-plugin": "5.36.1",
    "@typescript-eslint/parser": "5.36.1",
    "autoprefixer": "10.4.8",
    "browser-sync": "^2.29.1",
    "browser-sync-webpack-plugin": "2.3.0",
    "concurrently": "7.3.0",
    "copy-webpack-plugin": "11.0.0",
    "core-js": "3.25.0",
    "cross-env": "7.0.3",
    "css-loader": "6.7.1",
    "css-minimizer-webpack-plugin": "4.0.0",
    "cypress": "10.7.0",
    "eslint": "8.23.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-cypress": "2.12.1",
    "eslint-plugin-react": "7.31.1",
    "eslint-webpack-plugin": "3.2.0",
    "file-loader": "^6.2.0",
    "folder-hash": "4.0.2",
    "fork-ts-checker-webpack-plugin": "7.2.13",
    "generator-jhipster": "^7.1.0",
    "html-webpack-plugin": "5.5.0",
    "husky": "7.0.4",
    "identity-obj-proxy": "3.0.0",
    "jest": "28.1.3",
    "jest-environment-jsdom": "28.1.3",
    "jest-junit": "14.0.1",
    "jest-sonar": "0.2.12",
    "json-loader": "0.5.7",
    "lint-staged": "13.0.3",
    "merge-jsons-webpack-plugin": "2.0.1",
    "mini-css-extract-plugin": "2.6.1",
    "postcss-loader": "7.0.1",
    "prettier": "2.7.1",
    "prettier-plugin-java": "1.6.2",
    "prettier-plugin-packagejson": "2.2.18",
    "react-infinite-scroll-component": "6.1.0",
    "redux-mock-store": "1.5.4",
    "rimraf": "3.0.2",
    "sass": "1.54.8",
    "sass-loader": "13.0.2",
    "simple-progress-webpack-plugin": "2.0.0",
    "sinon": "14.0.0",
    "source-map-loader": "4.0.0",
    "sourcemap-istanbul-instrumenter-loader": "0.2.0",
    "style-loader": "3.3.1",
    "swagger-ui-dist": "4.14.0",
    "terser-webpack-plugin": "5.3.6",
    "thread-loader": "3.0.4",
    "ts-jest": "28.0.8",
    "ts-loader": "9.3.1",
    "typescript": "^4.8.2",
    "url-loader": "^4.1.1",
    "wait-on": "6.0.1",
    "webpack": "^5.77.0",
    "webpack-cli": "4.10.0",
    "webpack-dev-server": "4.10.1",
    "webpack-merge": "5.8.0",
    "webpack-notifier": "1.15.0",
    "workbox-webpack-plugin": "6.5.4"
  },
  "engines": {
    "node": ">=16.17.0"
  },
  "cacheDirectories": [
    "node_modules"
  ]
}

hbatalhaStch commented 1 year ago

I have a beginning and i'm stuck for a long time on it(the code is basically from the StephenChou's repository) :

You are using the original react-big-scheduler, not this fork which is react-big-scheduler-stch

Check how to get started with react-big-scheduler-stch here.

siracusa-lucas commented 1 year ago

Okay here it is, i want to use it with the APi and not locally of course

{
  "name": "pcf-project",
  "version": "1.0.0",
  "description": "Project containing your PowerApps Component Framework (PCF) control.",
  "scripts": {
    "build": "pcf-scripts build",
    "clean": "pcf-scripts clean",
    "lint": "pcf-scripts lint",
    "lint:fix": "pcf-scripts lint fix",
    "rebuild": "pcf-scripts rebuild",
    "start": "pcf-scripts start",
    "refreshTypes": "pcf-scripts refreshTypes"
  },
  "dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@fortawesome/fontawesome-svg-core": "^6.3.0",
    "@fortawesome/free-solid-svg-icons": "^6.3.0",
    "@fortawesome/react-fontawesome": "github:fortawesome/react-fontawesome",
    "@mui/icons-material": ">=5.0.0",
    "@mui/material": ">=5.0.0",
    "@mui/x-date-pickers": ">=5.0.0-alpha",
    "antd": "^5.4.0",
    "date-fns": "^2.29.3",
    "dayjs": "^1.11.7",
    "fortawesome": "^0.0.1-security",
    "interactjs": "^1.10.17",
    "moment": "^2.29.4",
    "react": "^18.2.0",
    "react-big-scheduler": "^0.2.7",
    "react-big-scheduler-stch": "^1.2.2",
    "react-bootstrap": "^2.7.2",
    "react-dom": "^18.2.0",
    "react-moment": "^1.1.3",
    "styled-components": "^5.3.6",
    "xrm": "^0.0.1-beta",
    "xrm-webapi": "^7.1.3"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^6.3.0",
    "@microsoft/eslint-plugin-power-apps": "^0.2.6",
    "@types/moment": "^2.13.0",
    "@types/node": "^18.8.2",
    "@types/powerapps-component-framework": "^1.3.4",
    "@types/react-big-scheduler": "^0.2.4",
    "@types/react-dom": "^18.0.11",
    "@types/xrm": "^9.0.70",
    "@typescript-eslint/eslint-plugin": "^5.39.0",
    "@typescript-eslint/parser": "^5.39.0",
    "@webpack-cli/generators": "^3.0.1",
    "ajv": "^7.2.4",
    "eslint": "^8.24.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.0.1",
    "eslint-plugin-react": "^7.31.8",
    "pcf-scripts": "^1",
    "pcf-start": "^1",
    "typescript": "^4.8.4",
    "typings-for-css-modules-loader": "^0.1.1"
  }
}

siracusa-lucas commented 1 year ago

I have a beginning and i'm stuck for a long time on it(the code is basically from the StephenChou's repository) :

You are using the original react-big-scheduler, not this fork which is react-big-scheduler-stch

Check how to get started with react-big-scheduler-stch here.

I already tried it but i had a error which is why i created this issue at first

hbatalhaStch commented 1 year ago

@siracusa-lucas I have created the project in sandbox and is working well also: https://codesandbox.io/s/angry-keldysh-dmf5ol

Could you please check it out?!

hbatalhaStch commented 1 year ago

From the error messages I am thinking it has something to do with setting the locale but I can't reproduce it.

@siracusa-lucas @lucianturcu could you guys please comment out the set...Locale methods to see if the error still persists?

siracusa-lucas commented 1 year ago

It doesn't work on my computer maybe cause i have another file for the root ? : ### index.tsx

import { IInputs, IOutputs } from "./generated/ManifestTypes";
import * as React from "react";
import App from './App';

export class Scheduler implements ComponentFramework.ReactControl<IInputs, IOutputs> {
    private notifyOutputChanged: () => void;
    private _context: ComponentFramework.Context<IInputs>;

    /**
     * Empty constructor.
     */
    constructor() { }

    /**
     * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
     * Data-set values are not initialized here, use updateView.
     * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
     * @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
     * @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
     */
    public init(
        context: ComponentFramework.Context<IInputs>,
        notifyOutputChanged: () => void,
        state: ComponentFramework.Dictionary
    ): void {
        this.notifyOutputChanged = notifyOutputChanged;
        this._context = context;
    }

    /**
     * Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
     * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
     * @returns ReactElement root react element for the control
     */
    public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
        return React.createElement(
            App, this._context
        );
    }

    /**
     * It is called by the framework prior to a control receiving new data.
     * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
     */
    public getOutputs(): IOutputs {
        return { };
    }

    /**
     * Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
     * i.e. cancelling any pending remote calls, removing listeners, etc.
     */
    public destroy(): void {
        // Add code to cleanup control if necessary
    }
}

siracusa-lucas commented 1 year ago

From the error messages I am thinking it has something to do with setting the locale but I can't reproduce it.

@siracusa-lucas @lucianturcu could you guys please comment out the set...Locale methods to see if the error still persists?

I will try that

Edit: Same mistake

lucianturcu commented 1 year ago

So I managed to fix the error for myself. It turned out I had a version of antd in my node_modules.

After deleting node_modules and package-lock.json and a fresh npm install, it seems to be working fine.

hbatalhaStch commented 1 year ago

/**

It is called by the framework prior to a control receiving new data.

@returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output” */

Glad to know.

hbatalhaStch commented 1 year ago

From the error messages I am thinking it has something to do with setting the locale but I can't reproduce it. @siracusa-lucas @lucianturcu could you guys please comment out the set...Locale methods to see if the error still persists?

I will try that

Edit: Same mistake

@siracusa-lucas I can't seem to reproduce your issue on my machine or on sandbox. I don't know if you are available/willing to connect on some platform and do a live demonstration of your problem so I can try to help

siracusa-lucas commented 1 year ago

From the error messages I am thinking it has something to do with setting the locale but I can't reproduce it. @siracusa-lucas @lucianturcu could you guys please comment out the set...Locale methods to see if the error still persists?

I will try that Edit: Same mistake

@siracusa-lucas I can't seem to reproduce your issue on my machine or on sandbox. I don't know if you are available/willing to connect on some platform and do a live demonstration of your problem so I can try to help

I can't now but maybe later today ?

hbatalhaStch commented 1 year ago

I can't now but maybe later today ?

yeah no problem, just let me know the specific time and platform to connect so I can see if I will be available.

hbatalhaStch commented 1 year ago

@siracusa-lucas why did you reopen the issue?

siracusa-lucas commented 1 year ago

@hbatalhaStch My bad, it's was a mistake, you're have done a lot of good things on this repo btw. Thanks for everything you've done to help me ;-)

hbatalhaStch / react-big-scheduler