Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jan 31 2019 22:22
    visualfanatic edited #9403
  • Jan 31 2019 22:04
    visualfanatic opened #9403
  • Jan 31 2019 18:25

    yyx990803 on regression-test

    fix: allow more enumerated valu… chore: update sponsors [ci skip… fix: fix v-bind:style for camel… and 1 more (compare)

  • Jan 31 2019 17:29
    yyx990803 closed #9402
  • Jan 31 2019 17:20
    devedse opened #9402
  • Jan 31 2019 16:49
    Justineo closed #9401
  • Jan 31 2019 16:40
    Giwayume opened #9401
  • Jan 31 2019 15:24
    yyx990803 closed #9396
  • Jan 31 2019 15:24

    yyx990803 on dev

    fix: fix child forceUpdate regr… (compare)

  • Jan 31 2019 15:08
    yyx990803 closed #9382
  • Jan 31 2019 15:08

    yyx990803 on dev

    fix: fix v-bind:style for camel… (compare)

  • Jan 31 2019 15:08
    yyx990803 closed #9386
  • Jan 31 2019 15:04

    yyx990803 on dev

    chore: update sponsors [ci skip… (compare)

  • Jan 31 2019 15:04

    yyx990803 on patreon-update-1548947041032

    (compare)

  • Jan 31 2019 15:04
    yyx990803 closed #9400
  • Jan 31 2019 15:04

    vue-bot on patreon-update-1548947041032

    chore: update sponsors [ci skip] (compare)

  • Jan 31 2019 15:04
    vue-bot opened #9400
  • Jan 31 2019 14:59

    yyx990803 on patreon-update-1548924868622

    (compare)

  • Jan 31 2019 14:58
    yyx990803 closed #9393
  • Jan 31 2019 14:56

    yyx990803 on dev

    fix: allow more enumerated valu… (compare)

Norman
@nkoehring
hi @captproton
Neil Duffy
@skiv71
heelo
Norman
@nkoehring
:wave:
Neil Duffy
@skiv71
Ah, I was wondering what text did that, lol
you busy @nkoehring ?
i mean, lots of work on?
i've been on a vue.js / node.js / mongo (was serverless) dapp for a while now, would like to see what else is out there
Norman
@nkoehring
My busy-level this week is: I got a new pillow, (finally) a new vacuum robot and an office chair this week and the pillow is the only thing I managed to try out.
Neil Duffy
@skiv71
oh, "stacked" by all accounts?
Norman
@nkoehring
yes and I know already that it will be even worse next week and the week after that
Neil Duffy
@skiv71
oh? work? coding?
Norman
@nkoehring
yeah, same same
Neil Duffy
@skiv71
who for? are you freelance too?
Norman
@nkoehring
I'm a consultant working as programmer and ...consultant (duh) at the moment.
Oh for a search engine.
Neil Duffy
@skiv71
oh, sounds good
they have any extra work on? :smile:
got some eggs to diversify
Norman
@nkoehring
Actually yes, both the search engine and the Consultancy I'm working for are hiring.
Neil Duffy
@skiv71
Remote? (i'm UK)
Norman
@nkoehring
mmh.. I'm not sure. I would need to ask. Everyone works remote now anyways so this might work.
I'll send you a PM
Neil Duffy
@skiv71
Yea, that's been the way for this year
Jennifer Eberlei
@jennifer.eberlei_gitlab

Hi there,
I am trying to get data from store and use it inside function -

this is my store code:

export const state = () => ({
  holidays: [],
  lastFetched: null,
});

export const mutations = {
  setHolidays(state, holidays) {
    state.holidays = holidays;
  },
  setLastFetch(state, date) {
    state.lastFetched = date;
  },
};
export const actions = {
  async loadHolidays({ commit, state }) {
    try {
      const date = new Date();
      const whichYear = date.getFullYear();
      const apiUrl = 'https://feiertage-api.de/api/?jahr=' + whichYear + '&nur_land=BW';
      const holidays = await fetch(apiUrl).then((response) => {
        if (response.status !== 200) {
          console.log('Looks like there was a problem. Status Code: ' + response.status);
          return;
        }

        return response.json().then((data) => {
          const dates = data;
          const newArr = [];
          const options = { year: 'numeric', month: 'numeric', day: 'numeric' };
          for (const value of Object.values(dates)) {
            const x = value;
            for (const [key, value] of Object.entries(x)) {
              if (`${key}` === 'datum') {
                newArr.push(
                  new Date(value).toLocaleDateString('de-DE', options).replace(/\./g, '/')
                );
              }
            }
          }
          return newArr;
        });
      });
      commit('setLastFetch', new Date());
      commit('setHolidays', holidays);
    } catch (e) {
      commit('setHolidays', []);
    }
  },
};

export const getters = {
  holidays: (state) => state.holidays,
};
and this is my page component:
<template>
  <div class="overflow-y-auto relative">
    <div class="flex flex-col">
      <h2 class="my-4 text-center">Neuen Urlaub anfragen</h2>
      <div class="flex flex-col p-2 mb-12">
        <FunctionalCalendar
          ref="VacationCalendar"
          v-model="calendarData"
          :sunday-start="calendarConfigs.sundayStart"
          :day-names="calendarConfigs.dayNames"
          :month-names="calendarConfigs.monthNames"
          :disabled-dates="[].concat('beforeToday', this.holidays)"
          :disabled-day-names="calendarConfigs.disabledDayNames"
          :is-date-picker="true"
          :is-multiple="true"
          :calendars-count="2"
          :is-date-range="true"
        ></FunctionalCalendar>
        <FloatingButton
          :text="`Anfragen`"
          :style="{ width: 'auto', position: 'relative', bottom: 0, marginTop: '30px' }"
          @click="onDateSelect()"
        ></FloatingButton>
      </div>
    </div>
    <FloatingButton
      :text="floatingButton.text"
      :style="floatingButton.style"
      :icon="floatingButton.icon"
      :button-type="floatingButton.buttonType"
      :target="floatingButton.target"
    />
  </div>
</template>

<script>
import FloatingButton from '@/components/atoms/FEFloatingButton';
import { FunctionalCalendar } from 'vue-functional-calendar';

const convertDateStringToDate = (date) => {
  const dateArr = date.split('/');
  console.log(10, dateArr);
  const newDate = new Date(dateArr[2], dateArr[1], dateArr[0]);
  return newDate;
};

const getDatesBetweenRange = (start, end) => {
  const arr = [];
  const dt = new Date(start);
  while (dt <= new Date(end)) {
    arr.push(new Date(dt));
    dt.setDate(dt.getDate() + 1);
  }
  return arr;
};

/**
 */
const checkDisabledDatesInRange = (start, end) => {
  console.log('checkDisabledDatesInRange\n');
  const fullRange = getDatesBetweenRange(start, end);
  console.log(this);
  const disabledDates = [...this.state.holidays.holidays];
  // const disabledDates = [...this.state.holidays.holidays].forEach((date) =>
  //   convertDateStringToDate(date)
  // );
  const clearedArray = [];

  [...fullRange].forEach((item) => {
    const dt = new Date(item);
    console.log(dt.getDay());
    // check for weekends
    if (dt.getDay() === 6 || dt.getDay() === 0) {
      console.log('weekend', dt);
    } else {
      clearedArray.push(dt);
    }
  });
  console.log(clearedArray, disabledDates);
  return clearedArray;
};
export default {
  name: 'VacationCreatePage',
  components: {
    FunctionalCalendar,
    FloatingButton,
  },
  props: {},
  data() {
    return {
      calendarData: {},
      calendarConfigs: {
        sundayStart: false,
        dayNames: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
        monthNames: [
          'Januar',
          'Februar',
          'März',
          'April',
          'Mai',
          'Juni',
          'Juli',
          'August',
          'September',
          'Oktober',
          'November',
          'Dezember',
        ],
        disabledDayNames: ['Sa', 'So'],
      },
      floatingButton: {
        text: 'Nächster Schritt',
        icon: 'arrow_right_alt',
        style: {
          width: 'auto',
          bottom: 'calc(80px + 1.5rem)',
        },
        buttonType: 'link',
        target: '',
      },
    };
  },
  created() {
    this.$store.dispatch('holidays/loadHolidays');
  },
  computed: {
    holidays: () => {
      return this.$store.state.holidays.holidays;
    }
  },
  watch: {
    holidays: (oldValue, newValue) => {
      console.log('was: ', oldValue, 'now: ', newValue);
    },
  },
...
  methods: {
    onDateSelect(date) {
      const calendarValues = this.$refs.VacationCalendar.value;
      const payLoad = {};
      console.log(calendarValues);

      if (calendarValues.selectedDate.length) {
        payLoad.requestFrom = convertDateStringToDate(calendarValues.selectedDate);
        payLoad.requestTo = convertDateStringToDate(calendarValues.selectedDate);

        console.log('selected single date', payLoad);
        this.$store.commit('vacation-request/addRequest', payLoad);
      }

      if (calendarValues.selectedDates.length) {
        console.log('selected multiple days');
      }

      if (calendarValues.dateRange.start.length && calendarValues.dateRange.end.length) {
        console.log('selected daterange');
        payLoad.requestFrom = convertDateStringToDate(calendarValues.dateRange.start);
        payLoad.requestTo = convertDateStringToDate(calendarValues.dateRange.end);
        console.log(payLoad.requestFrom, payLoad.requestTo);
        payLoad.dates = checkDisabledDatesInRange(payLoad.requestFrom, payLoad.requestTo);
        // this.$store.commit('vacation-request/addRequest', payLoad);
      }
    },
  },
  mounted() {
    this.$store.dispatch('vacation-request/loadRequests');
  },
  destroyed() {},
};
</script>
```
I am trying to access the "holidays" in my checkDisabledDatesInRangefunction, but I always get "$store" is undefined :/ what am I doing wrong?
Neil Duffy
@skiv71
its not because you're using an arrow fn is it? i.e. no this bind allowed
couldn't see you accessing this.$store in it though
Jennifer Eberlei
@jennifer.eberlei_gitlab
I did that before but it said its undefined, now it just says "$store" is undefined. I googled a bit and it said I have to use a watcher for accessing the data within my function but I am basically learning by doing here right now. lol
Neil Duffy
@skiv71
you cannot use arrow for vue functions where you expect 'this' to be available
i don't use vuex, just not necessary, but you need std functions, so vue can bind them
Jennifer Eberlei
@jennifer.eberlei_gitlab
I will try that thank you
rufaidulk
@rufaidulk
Hi
I am building laravel vuejs app.I have two vue instance, one for admin and other for normal user. I am using vuex store for state management, handling authentication etc. Both stores are in different folder. Now the problem is when i logged in first app, am getting logged in second app also. How can i solve this
Jennifer Eberlei
@jennifer.eberlei_gitlab
Does anybody have experience with vue-functional-datepicker?
for some reason when I select the option to use "daterange" together with datepicker I can't select just 1 day. I need the ability to select 1 day or date-range.
Jennifer Eberlei
@jennifer.eberlei_gitlab
I have this function - can somebody tell me how to optimize it?
 /**
     * filteredDates
     * @date 2020-11-29
     * @param {String} start - expects Date Object.
     * @param {String} end - expects Date Object.
     * @returns {Array} - returns filtered Array.
     */
    filteredDates(start, end) {
      const fullRange = getDatesBetweenRange(start, end);
      console.log(fullRange);
      const disabledDates = [];
      const datesWithoutWeekend = [];
      let clearedArray = [];

      // convert the date-strings to actual Date() so we can
      // compare them
      [...this.holidays].forEach((date) => {
        disabledDates.push(convertDateStringToDate(date));
      });

      // check for weekends
      [...fullRange].forEach((date) => {
        console.log('filteredDates ', date);
        if (!date.getDay() === 6 || !date.getDay() === 0) {
          datesWithoutWeekend.push(date);
        }
      });

      // filter disabled Dates
      [...datesWithoutWeekend].forEach((date) => {
        clearedArray = datesWithoutWeekend.filter((date) => !disabledDates.includes(date));
      });

      console.log('clearedArray:\n', clearedArray);

      return clearedArray;
    },
right now when I am at the part where it's supposed to check for weekends I run into a memory issue, which I don't know why
Neil Duffy
@skiv71
@jennifer.eberlei_gitlab I use pikaday, not found a single vue based component library that's necessary
regarding optimization, wherever you end up using .forEach, map, reduce will almost always produce a more readable, maintainable and performant piece of code :smile:
to optimize your snippet, an 'english' explanation of its true purpose will yield a better answer
Neil Duffy
@skiv71
oh, and since your filtering 'map, filter, reduce' - all good JS coders need to master these
Jennifer Eberlei
@jennifer.eberlei_gitlab

thank you very much for your reply.

I have the following situation:
I have to create a "vacation-request" calendar, where a user can either select a single date or a date-range. Weekends should be disabled and also public holidays (which I get from API)
Since I am using vue-functional-datepicker for now; when I select a date-range I have the start- and end-date available, but I have to manually check whether the days in between that range are possible selections or not. Therefore I created some functions which help me sorting that out, so when I send the request to the db, only the days allowed get send.

I have updated my function so far to this:
  getDatesBetweenRange(startDate, endDate) {
      let dates = [];
      // to avoid modifying the original date
      const theDate = new Date(startDate);
      const disabledDates = this.holidaysConverted;
      const filteredArray = []; // array which will hold output of filtered dates

      /* eslint no-unmodified-loop-condition: "off" */
      while (theDate < endDate) {
        // filter weekends out of array
        if (theDate.getDay() === 6 || theDate.getDay() === 0) {
        } else {
          dates = [...dates, new Date(theDate)];
        }
        theDate.setDate(theDate.getDate() + 1);
      }
      dates = [...dates, endDate];
      [...dates].forEach((date) => {
        // filter holidays out of our array
        for (let i = 0; i < disabledDates.length; ++i) {
          if (date.getTime() !== disabledDates[i].getTime()) {
            filteredArray.push(date);
          } else {
            console.log(
              'appears in disabledDates:\n',
              date,
              disabledDates[i],
              date.getTime() === disabledDates[i].getTime()
            );
          }
        }
      });
      console.log('filteredArray\n', filteredArray);
      return filteredArray;
    },
but for some reason it still puts the 24th of December into my filtered array, even though I also get an output in the else condition, which is startling me a bit.
Z
@sdrkyj
wow, a holidays API? In China, I've searched for such thing, but none
Jennifer Eberlei
@jennifer.eberlei_gitlab
well somebody built a script that gates public holidays from Wikipedia and returned them as json. Maybe somebody can apply that...
https://feiertage-api.de/
this is for german holidays though
Z
@sdrkyj
Thanks for a reply. btw, the Vue chat has moved to Discord. https://vue.land