From 2f39772f673ad25ddaddfabcb6691ddbbfbe5bf1 Mon Sep 17 00:00:00 2001 From: "jannik.lange" Date: Wed, 22 May 2024 11:20:22 +0200 Subject: [PATCH 1/4] save #41 --- .../BuisnessHours/BuisnessHourType.ts | 33 ++++++++ .../BuisnessHours/MucBuisnessHours.vue | 84 +++++++++++++++++++ 2 files changed, 117 insertions(+) create mode 100644 src/components/BuisnessHours/BuisnessHourType.ts create mode 100644 src/components/BuisnessHours/MucBuisnessHours.vue diff --git a/src/components/BuisnessHours/BuisnessHourType.ts b/src/components/BuisnessHours/BuisnessHourType.ts new file mode 100644 index 00000000..6b31e4a9 --- /dev/null +++ b/src/components/BuisnessHours/BuisnessHourType.ts @@ -0,0 +1,33 @@ +enum WeekDays { + sunday = "So", + monday = "Mo", + tuesday = "Di", + wednesday = "Mi", + thursday = "Do", + friday = "Fr", + saturday = "Sa", +} + +const weekDaysMapping = { + 0: WeekDays.sunday, + 1: WeekDays.monday, + 2: WeekDays.tuesday, + 3: WeekDays.wednesday, + 4: WeekDays.thursday, + 5: WeekDays.friday, + 6: WeekDays.saturday, +}; + +type OpeningHour = { + from: string; + to: string; +}; + +type BuisnessHourType = { + weekDay: WeekDays; + openingHours: OpeningHour[]; +}; + +export type { BuisnessHourType, OpeningHour, WeekDays }; + +export { weekDaysMapping }; diff --git a/src/components/BuisnessHours/MucBuisnessHours.vue b/src/components/BuisnessHours/MucBuisnessHours.vue new file mode 100644 index 00000000..d5c0186a --- /dev/null +++ b/src/components/BuisnessHours/MucBuisnessHours.vue @@ -0,0 +1,84 @@ + + + + + From 4d42edabfe372f04747dc30c92bcd431b867cf9a Mon Sep 17 00:00:00 2001 From: langehm <38280183+langehm@users.noreply.github.com> Date: Thu, 23 May 2024 00:23:24 +0200 Subject: [PATCH 2/4] :poop: many corrections to businessHour #51 --- .../BuisnessHours/BuisnessHourType.ts | 33 ----- .../BuisnessHours/BusinessHourType.ts | 13 ++ .../BuisnessHours/BusinessHours.stories.ts | 98 ++++++++++++++ .../BuisnessHours/MucBuisnessHours.vue | 84 ------------ .../BuisnessHours/MucBusinessHours.vue | 121 ++++++++++++++++++ 5 files changed, 232 insertions(+), 117 deletions(-) delete mode 100644 src/components/BuisnessHours/BuisnessHourType.ts create mode 100644 src/components/BuisnessHours/BusinessHourType.ts create mode 100644 src/components/BuisnessHours/BusinessHours.stories.ts delete mode 100644 src/components/BuisnessHours/MucBuisnessHours.vue create mode 100644 src/components/BuisnessHours/MucBusinessHours.vue diff --git a/src/components/BuisnessHours/BuisnessHourType.ts b/src/components/BuisnessHours/BuisnessHourType.ts deleted file mode 100644 index 6b31e4a9..00000000 --- a/src/components/BuisnessHours/BuisnessHourType.ts +++ /dev/null @@ -1,33 +0,0 @@ -enum WeekDays { - sunday = "So", - monday = "Mo", - tuesday = "Di", - wednesday = "Mi", - thursday = "Do", - friday = "Fr", - saturday = "Sa", -} - -const weekDaysMapping = { - 0: WeekDays.sunday, - 1: WeekDays.monday, - 2: WeekDays.tuesday, - 3: WeekDays.wednesday, - 4: WeekDays.thursday, - 5: WeekDays.friday, - 6: WeekDays.saturday, -}; - -type OpeningHour = { - from: string; - to: string; -}; - -type BuisnessHourType = { - weekDay: WeekDays; - openingHours: OpeningHour[]; -}; - -export type { BuisnessHourType, OpeningHour, WeekDays }; - -export { weekDaysMapping }; diff --git a/src/components/BuisnessHours/BusinessHourType.ts b/src/components/BuisnessHours/BusinessHourType.ts new file mode 100644 index 00000000..ba9dbc9c --- /dev/null +++ b/src/components/BuisnessHours/BusinessHourType.ts @@ -0,0 +1,13 @@ +type WeekDays = "Mo" | "Di" | "Mi" | "Do" | "Fr" | "Sa" | "So"; + +type OpeningHour = { + from: string; + to: string; +}; + +type BusinessHourType = { + weekDay: WeekDays; + openingHours: OpeningHour[]; +}; + +export type { BusinessHourType, OpeningHour, WeekDays }; diff --git a/src/components/BuisnessHours/BusinessHours.stories.ts b/src/components/BuisnessHours/BusinessHours.stories.ts new file mode 100644 index 00000000..eeee14b4 --- /dev/null +++ b/src/components/BuisnessHours/BusinessHours.stories.ts @@ -0,0 +1,98 @@ +import MucBusinessHours from "./MucBusinessHours.vue"; + +export default { + component: MucBusinessHours, + title: "MucBusinessHours", + tags: ["autodocs"], + // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked + parameters: { + docs: { + description: { + component: `TODO + +[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-components-business-hours) +`, + }, + }, + }, +}; + +const businessHours = [ + { + weekDay: "Mo", + openingHours: [ + { + from: "08:00", + to: "12:00", + }, + { + from: "14:00", + to: "18:00", + }, + ], + }, + { + weekDay: "Di", + openingHours: [ + { + from: "09:00", + to: "13:00", + }, + ], + }, + { + weekDay: "Mi", + openingHours: [ + { + from: "10:00", + to: "14:00", + }, + ], + }, + { + weekDay: "Do", + openingHours: [ + { + from: "08:00", + to: "12:00", + }, + { + from: "15:00", + to: "19:00", + }, + ], + }, + { + weekDay: "Fr", + openingHours: [ + { + from: "08:00", + to: "12:00", + }, + { + from: "13:00", + to: "17:00", + }, + ], + }, + { + weekDay: "Sa", + openingHours: [ + { + from: "10:00", + to: "13:00", + }, + ], + }, + { + weekDay: "So", + openingHours: [], + }, +]; + +export const Default = { + args: { + businessHours: businessHours, + toggleable: true, + }, +}; diff --git a/src/components/BuisnessHours/MucBuisnessHours.vue b/src/components/BuisnessHours/MucBuisnessHours.vue deleted file mode 100644 index d5c0186a..00000000 --- a/src/components/BuisnessHours/MucBuisnessHours.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - - - diff --git a/src/components/BuisnessHours/MucBusinessHours.vue b/src/components/BuisnessHours/MucBusinessHours.vue new file mode 100644 index 00000000..75632896 --- /dev/null +++ b/src/components/BuisnessHours/MucBusinessHours.vue @@ -0,0 +1,121 @@ + + + + + From 66e852e969e14ad277cf37d8f9b086308ca6c2d0 Mon Sep 17 00:00:00 2001 From: langehm <38280183+langehm@users.noreply.github.com> Date: Fri, 24 May 2024 10:51:14 +0200 Subject: [PATCH 3/4] :art: added documentation, fixed bugs with toggle state #41 --- .../BuisnessHours/BusinessHourType.ts | 15 ++++ .../BuisnessHours/MucBusinessHours.vue | 81 ++++++++++++++----- 2 files changed, 78 insertions(+), 18 deletions(-) diff --git a/src/components/BuisnessHours/BusinessHourType.ts b/src/components/BuisnessHours/BusinessHourType.ts index ba9dbc9c..1c82623d 100644 --- a/src/components/BuisnessHours/BusinessHourType.ts +++ b/src/components/BuisnessHours/BusinessHourType.ts @@ -1,10 +1,25 @@ +/** + * Shorthand notation of all seven days in german. + * + * @typedef {"Mo" | "Di" | "Mi" | "Do" | "Fr" | "Sa" | "So"} WeekDays + */ type WeekDays = "Mo" | "Di" | "Mi" | "Do" | "Fr" | "Sa" | "So"; +/** + * @typedef {Object} OpeningHour + * @property {string} from - The start time of the opening period (in 'HH:mm' format). + * @property {string} to - The end time of the opening period (in 'HH:mm' format). + */ type OpeningHour = { from: string; to: string; }; +/** + * @typedef {Object} BusinessHourType + * @property {WeekDays} weekDay - The day of the week for which the opening hours apply. + * @property {OpeningHour[]} openingHours - A list of opening hours for the specified day of the week. + */ type BusinessHourType = { weekDay: WeekDays; openingHours: OpeningHour[]; diff --git a/src/components/BuisnessHours/MucBusinessHours.vue b/src/components/BuisnessHours/MucBusinessHours.vue index 75632896..5ef0869e 100644 --- a/src/components/BuisnessHours/MucBusinessHours.vue +++ b/src/components/BuisnessHours/MucBusinessHours.vue @@ -6,18 +6,17 @@
-

+

-

+
@@ -76,46 +78,89 @@ import { BusinessHourType } from "./BusinessHourType"; const LOCALES = "de-DE"; -// Buisness const props = withDefaults( defineProps<{ + /** + * This array includes all the opening hours for all days of the week. + */ businessHours: BusinessHourType[]; + + /** + * Lets you choose between the toggleable and fixed state of the component. + * In the fixed state, no toggle button will be shown. + */ toggleable?: boolean; + + /** + * Choose an icon for the toggle button. The default if none is given is the time icon. + */ + icon?: string; }>(), { + icon: "time", toggleable: false, } ); let collapsed = ref(props.toggleable); -defineSlots<{ +const slots = defineSlots<{ + /** + * Display a hint beneath all the opening hours. + */ hint(): any; }>(); +/** + * Toggles the collapsed state of the business hours section. + */ const toggleCollapsable = () => { collapsed.value = !collapsed.value; }; -const collapsedClass = computed(() => { - return collapsed.value ? "collapse" : ""; -}); +/** + * Computes the CSS class for the collapse state. + * + * @returns {string} The CSS class for the collapse state. + */ +const collapseClass = computed(() => (collapsed.value ? "collapse" : "")); + +/** + * Computes the CSS class for the collapsed state. + * + * @returns {string} The CSS class for the collapsed state. + */ +const collapsedClass = computed(() => (collapsed.value ? "collapsed" : "")); +/** + * Computes the short name of today's day. + * + * @returns {string} The short name of today's day (e.g., "Mo", "Di"). + */ const todaysDayShortName = computed(() => { const today = new Date(); return today.toLocaleDateString(LOCALES, { weekday: "short" }); }); +/** + * Highlights the business day based on whether it has opening hours and if it is today's day. + * + * @param {BusinessHourType} businessHour - The business hour object to check. + * @returns {string} The CSS class indicating if the business is open or closed. + */ const highlightBusinessDay = (businessHour: BusinessHourType) => { if (businessHour.openingHours.length === 0) return "is-closed"; if (businessHour.weekDay === todaysDayShortName.value) return "is-open"; }; -const todaysBusinessHours = computed(() => { - return props.businessHours.find((curr) => { - return curr.weekDay === todaysDayShortName.value; - }); -}); +/** + * Computes today's business hours from the provided business hours. + * + * @returns {BusinessHourType | undefined} The business hours for today, if available. + */ +const todaysBusinessHours = computed(() => + props.businessHours.find((curr) => curr.weekDay === todaysDayShortName.value) +); From 79b6c4ef174976cd017fc48015a5c8f0f6f728b9 Mon Sep 17 00:00:00 2001 From: langehm <38280183+langehm@users.noreply.github.com> Date: Fri, 24 May 2024 10:53:43 +0200 Subject: [PATCH 4/4] :art: added documentation #41 --- .../BuisnessHours/BusinessHours.stories.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/BuisnessHours/BusinessHours.stories.ts b/src/components/BuisnessHours/BusinessHours.stories.ts index eeee14b4..973db22f 100644 --- a/src/components/BuisnessHours/BusinessHours.stories.ts +++ b/src/components/BuisnessHours/BusinessHours.stories.ts @@ -8,7 +8,10 @@ export default { parameters: { docs: { description: { - component: `TODO + component: ` +The businessHours component is used to display the business hours for each day of the week. +The current day is highlighted as well as the days that are closed. +In the toggleable variant, the current day and the opening hours are also displayed on the toggle button. [🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-components-business-hours) `, @@ -96,3 +99,10 @@ export const Default = { toggleable: true, }, }; + +export const Fixed = { + args: { + ...Default.args, + toggleable: false, + }, +};