Premium support for our pure JavaScript UI components


Post by nramos »

Hi!

I'm trying to highlight the weekends of the gantt, I found that you have to set the highlight Weekends property to true, but nothing happened in the gantt, it doesn't even put a css for the weekends and they look the same as the rest of the days.

Will I be skipping any configuration? attached image of the gantt.

Weekends are highlighted in their demo, as I show in the attached image.

Ty.

Attachments
your gantt demo.JPG
your gantt demo.JPG (120.28 KiB) Viewed 991 times
highlightWeekends problem.JPG
highlightWeekends problem.JPG (73.93 KiB) Viewed 991 times

Post by saki »

How did you configure the feature? I was trying to add:

    nonWorkingTimeFeature: {
        disabled : false,
        highlightWeekends: true
    }

to our Vue 3 simple demo (in AppConfig.js file) and it worked as expected. Even more, the feature is on by default so it is not necessary to add anything and weekends are shaded.

If still in troubles, post please a runnable showcase.


Post by nramos »

I noticed that if the option is activated by default, I don't understand why it doesn't work for me.

anyway add this code:

const GanttQuery = bryntum.query('gantt');
			GanttQuery.features.nonWorkingTime.disabled = false;
			GanttQuery.features.nonWorkingTime.highlightWeekends = true;

and also try what you indicate, attached image.

Attachments
activated feature nonWorkingTime.JPG
activated feature nonWorkingTime.JPG (82.98 KiB) Viewed 982 times

Post by alex.l »

Could you please attach a runnable app, we will check it, since it works well in our examples.
Also please share Vue version and Gantt version you use.

Thanks!

All the best,
Alex


Post by nramos »

they do not allow me to give you access to our app.

the vue version is V3 and the gantt version is V4.2.5

Attached component configuration.

stay tuned

Attachments
configGantt.rar
(1.61 KiB) Downloaded 52 times

Post by saki »

Thank you for the component code you provided. There is no obvious error in the code that could cause the issue so we need a showcase that we could run and that would manifest the problem. I understand that you cannot give us the whole application, yet it should be possible to make a runnable sample with the above configGantt to debug.

Note: As I can see from the source you do not use Vue wrappers. Although it is not the cause of the issue, using them is the recommended and supported approach.


Post by nramos »

Hi saki,

I share 2 non-executable projects, but here is all the code I use:

On the one hand I have the isolated component of the gantt and in the other project I implement it, one is in vue2 and the other in vue3.

components-vue(Gantt bryntum implementation):
https://drive.google.com/file/d/1IAUm3Jhut414jGlkKl1ePhefxHqbprv0/view?usp=sharing

dashboard-builder - copy.rar(where do i implement the gantt) views/Planning
https://drive.google.com/file/d/1LED48JsK8WiFXEwCK2YiVJgaIazFJmrp/view?usp=sharing

stay tuned.


Post by saki »

Unfortunately, I was not able to run either of the samples you posted. For the first one I tried to remove node_modules, package-lock.json and yarn.lock and then reinstall and run npm run serve but I got this error:

npm run serve

> @iqbuild/components-vue@0.7.7-beta.20 serve
> vite

(!) "alias" option is deprecated. Use "resolve.alias" instead.

  vite v2.5.7 dev server running at:

  > Local: https://localhost:3000/
  > Network: use `--host` to expose

  ready in 237ms.

8:55:05 PM [vite] Internal server error: Failed to resolve import "./components/Icon" from "src/App.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/Shared/data/devel/tmp/components-vue/src/App.vue
  1  |  import { defineComponent } from "vue";
  2  |  import Icon from "./components/Icon";
     |                    ^
  3  |  const _sfc_main = defineComponent({
  4  |    name: "App",
      at formatError (/Users/Shared/data/devel/tmp/components-vue/node_modules/vite/dist/node/chunks/dep-63d4bd14.js:50142:46)
      at TransformContext.error (/Users/Shared/data/devel/tmp/components-vue/node_modules/vite/dist/node/chunks/dep-63d4bd14.js:50138:19)
      at normalizeUrl (/Users/Shared/data/devel/tmp/components-vue/node_modules/vite/dist/node/chunks/dep-63d4bd14.js:75860:26)
      at processTicksAndRejections (internal/process/task_queues.js:97:5)
      at async TransformContext.transform (/Users/Shared/data/devel/tmp/components-vue/node_modules/vite/dist/node/chunks/dep-63d4bd14.js:75995:57)
      at async Object.transform (/Users/Shared/data/devel/tmp/components-vue/node_modules/vite/dist/node/chunks/dep-63d4bd14.js:50352:30)
      at async transformRequest (/Users/Shared/data/devel/tmp/components-vue/node_modules/vite/dist/node/chunks/dep-63d4bd14.js:65393:29)
      at async viteTransformMiddleware (/Users/Shared/data/devel/tmp/components-vue/node_modules/vite/dist/node/chunks/dep-63d4bd14.js:65521:32)
8:55:05 PM [vite] Internal server error: Can't find stylesheet to import.

For the second I just tried npm run serve which led to the following errors:

npm run serve

> dashboard-builder@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 14 errors                                                  9:08:41 PM

These dependencies were not found:

* @/components/Navigator/index.vue in ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=ts
* @/utils in ./src/store/modules/assistance/actions.ts
* @/utils/AxiosSingleton in ./src/store/modules/assistance/actions.ts, ./src/store/modules/auth/actions.ts and 3 others
* @/views/MainLayout.vue in ./src/router/index.ts

To install them, you can run: npm install --save @/components/Navigator/index.vue @/utils @/utils/AxiosSingleton @/views/MainLayout.vue


These relative modules were not found:

* ../views/Analytics/Analytics.vue in ./src/router/index.ts
* ../views/Assistance/Statistics/Statistics.vue in ./src/router/index.ts
* ../views/Summaries/Company/Company.vue in ./src/router/index.ts
* ../views/Summaries/Project/Project.vue in ./src/router/index.ts
* ./components/FontAwesomeIcon.vue in ./src/main.ts
* ./utils in ./src/globalMixin.ts
ERROR in src/globalMixin.ts:1:34
TS2307: Cannot find module './utils' or its corresponding type declarations.
  > 1 | import { firstCapitalCase } from './utils';
      |                                  ^^^^^^^^^
    2 |
    3 | export default {
    4 |         methods: {

Both samples contain many files and are too complex for us to debug. An ideal sample is very simple, a couple of files, immediately runnable with npm i followed by npm run serve and without node_modules folder.

The only case when we do not need such sample is when the error is reproducible in one of our examples.

Give us please something simple that we can easily run, investigate and debug.


Post by nramos »

Hi!

Here is a simple sample, you should just give it a "yarn serve".
https://drive.google.com/file/d/14SIYi09kREwgbdg5FWq43vjgVaTaK7Kn/view?usp=sharing

you tell me, I stay tuned.


Post by saki »

The problem seems to be in data. NonWorkingTime feature binds to project calendar and your project calendar does not have any non-working intervals defined.

Check please the data, possibly simplify, that there would only be one calendar which would define non-working intervals correctly. JSON should have something like the following:

{
  "success" : true,

  "project" : {
    "calendar"     : "general",
    "startDate"    : "2019-01-14",
    "hoursPerDay"  : 24,
    "daysPerWeek"  : 5,
    "daysPerMonth" : 20
  },

  "calendars" : {
    "rows" : [
      {
        "id"        : "general",
        "name"      : "General",
        "intervals" : [
          {
            "recurrentStartDate" : "on Sat at 0:00",
            "recurrentEndDate"   : "on Mon at 0:00",
            "isWorking"          : false
          }
        ],
// etc

When the gantt is shown on the screen you can verify whether there are any non-working intervals by typing the following in the console:

bryntum.query('gantt').project.calendar.data.intervals // must be a non-empty array

You can also check:

bryntum.query('gantt').features.nonWorkingTime.store.allRecords.map(r => r.data) // you must get ~10 records corresponding to non-working weekends

Post Reply