@monoui/vuejs 1.1.45 → 1.1.48

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@monoui/vuejs",
-	"version": "1.1.45",
+	"version": "1.1.48",
 	"description": "This project will contain MonoFor UI Framework",
 	"main": "./dist/main.js",
 	"repository": "git@gitlab.com:monoui/vuejs.git",
@@ -34,6 +34,7 @@
 		"vee-validate": "^3.0.11",
 		"vue": "^2.6.12",
 		"vue-cron-2": "^1.0.7",
+		"cron-parser": "^4.8.1",
 		"vue-js-toggle-button": "^1.3.3",
 		"vue-multiselect": "^2.1.6",
 		"vue-server-renderer": "^2.6.12",
@@ -41,7 +42,7 @@
 		"vue-sweetalert2": "^4.2",
 		"vue-template-compiler": "^2.6.12",
 		"vue-test-utils": "^1.0.0-beta.11",
-		"vue2-datepicker": "^3.6.2",
+		"vue2-datepicker": "^3.11.1",
 		"vuejs-noty": "^0.1.3"
 	},
 	"devDependencies": {

package/src/components/Cron/CronModern.vue

@@ -0,0 +1,479 @@
+<template>
+	<div>
+		<div class="d-flex align-items-center mb-3">
+			<mui-button
+				variant="light"
+				class="border-0"
+				@click="add"
+				v-if="!single"
+			>
+				<mui-icon class="mr-1" icon="plus" /> {{ addTimingButtonText }}
+			</mui-button>
+			<div class="ml-2 d-flex align-items-center">
+				<div>
+					<span>
+						<mui-icon class="mr-1" icon="clock" />
+					</span>
+					<strong>LOCAL</strong>
+					<span class="text-monospace">
+						{{ currentLocalTime }}
+					</span>
+				</div>
+				<div class="ml-2">
+					<strong>UTC</strong>
+					<span class="text-monospace">
+						{{ currentUTCTime }}
+					</span>
+				</div>
+			</div>
+		</div>
+		<mui-modal title="Select Timezone" v-model="visible.timeZone" size="xs">
+			<v-select
+				v-model="selectedTimeZone"
+				:options="options.timeZones"
+				:clearable="false"
+			/>
+			<template #modal-footer>
+				<mui-button @click="setTimeZone" variant="primary">
+					Use this Time Zone
+				</mui-button>
+			</template>
+		</mui-modal>
+		<div v-if="single">
+			<div class="d-flex mb-1">
+				<b-badge
+					pill
+					variant="light mr-2"
+					href="#"
+					@click="() => (cron = macro.value)"
+					v-for="(macro, index) in cronMacros"
+					:key="index"
+				>
+					{{ macro.text }}
+				</b-badge>
+			</div>
+			<div class="d-flex align-items-center">
+				<b-form-input
+					v-model="cron"
+					type="text"
+					class="text-monospace"
+					size="sm"
+					style="max-width: 220px"
+					placeholder="Type your cron expression"
+				/>
+				<span class="ml-2" v-if="getNextInterval(singleTiming)">
+					This will run at
+					<b>{{
+						getNextInterval(singleTiming, "YYYY-MM-DD HH:mm")
+					}}</b>
+					({{ getNextInterval(singleTiming) }})
+				</span>
+			</div>
+		</div>
+		<div v-else>
+			<div v-for="(timing, index) in timings" :key="timing.Id">
+				<div class="d-flex align-items-center mb-2">
+					<mui-button
+						variant="light"
+						class="border-0"
+						@click="remove(index)"
+					>
+						<mui-icon class="mr-1" icon="trash" />
+					</mui-button>
+					<div style="width: 140px" class="ml-2">
+						<v-select
+							size="sm"
+							v-model="timing.Name"
+							:options="options.macros"
+							:clearable="false"
+							:onChange="
+								(newValue, oldValue) =>
+									selectedMacro(timing, newValue, oldValue)
+							"
+						/>
+					</div>
+					<mui-button
+						class="ml-2"
+						@click="showTimeZoneSelector(timing)"
+					>
+						{{ timing.TimeZone }}
+					</mui-button>
+					<div class="d-flex align-items-center">
+						<div
+							v-if="getMacro(timing.Name).hasDaySelector"
+							class="ml-2 d-flex align-items-center"
+						>
+							<div class="input-group input-group-sm ml-1">
+								<div class="input-group-prepend">
+									<span class="input-group-text pb-1">
+										Day
+									</span>
+								</div>
+								<v-select
+									size="sm"
+									style="width: 125px"
+									v-model="timing.WeekDay"
+									:options="weekDays"
+									:clearable="false"
+									:onChange="
+										event =>
+											changeCronPart(timing, 'day', event)
+									"
+								/>
+							</div>
+						</div>
+						<div
+							v-if="getMacro(timing.Name).hasHourSelector"
+							class="ml-2 d-flex align-items-center"
+						>
+							<div class="input-group input-group-sm ml-1">
+								<div class="input-group-prepend">
+									<span class="input-group-text pb-1">
+										Hour
+									</span>
+								</div>
+								<input
+									class="form-control"
+									style="width: 40px;"
+									type="text"
+									:value="getCronPart(timing, 'hour')"
+									@input="
+										event =>
+											changeCronPart(
+												timing,
+												'hour',
+												event.target.value
+											)
+									"
+								/>
+							</div>
+						</div>
+						<div
+							v-if="getMacro(timing.Name).hasMinuteSelector"
+							class="ml-2 d-flex align-items-center"
+						>
+							<div class="input-group input-group-sm ml-1">
+								<div class="input-group-prepend">
+									<span class="input-group-text pb-1">
+										Minute
+									</span>
+								</div>
+								<input
+									class="form-control"
+									style="width: 40px;"
+									type="text"
+									:value="getCronPart(timing, 'minute')"
+									@input="
+										event =>
+											changeCronPart(
+												timing,
+												'minute',
+												event.target.value
+											)
+									"
+								/>
+							</div>
+						</div>
+					</div>
+					<b-form-input
+						v-model="timing.Cron"
+						type="text"
+						class="ml-2 text-monospace"
+						size="sm"
+						style="max-width: 220px"
+						placeholder="Type your cron expression"
+						v-if="timing.IsCustom"
+					/>
+					<span class="ml-2" v-if="getNextInterval(timing)">
+						This will run at
+						<b>{{ getNextInterval(timing, "YYYY-MM-DD HH:mm") }}</b>
+						({{ getNextInterval(timing) }})
+					</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import cronParser from "cron-parser";
+import moment from "moment";
+export default {
+	name: "mui-cron-modern",
+
+	props: {
+		value: {
+			type: [Array, String],
+			required: true
+		},
+
+		maxTiming: {
+			type: Number,
+			required: false,
+			default: 7
+		},
+
+		single: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		timeZones: {
+			type: Array,
+			required: true
+		},
+		addTimingButtonText: {
+			type: String,
+			required: false,
+			default: "Add timing"
+		}
+	},
+
+	watch: {
+		timings: {
+			immediate: true,
+			deep: true,
+			handler() {
+				if (this.single) return;
+				this.$emit("input", this.timings);
+			}
+		},
+		cron: {
+			immediate: true,
+			deep: true,
+			handler() {
+				if (!this.single) return;
+				this.$emit("input", this.cron);
+			}
+		}
+	},
+
+	computed: {
+		singleTiming() {
+			return {
+				Cron: this.cron
+			};
+		}
+	},
+
+	mounted() {
+		this.setTime();
+		if (!this.timer) {
+			this.timer = setInterval(this.setTime, 1000);
+		}
+		this.options.macros = this.cronMacros.map(x => {
+			return {
+				id: x.name,
+				label: x.text,
+				value: x
+			};
+		});
+		this.options.timeZones = this.timeZones;
+
+		if (this.single) {
+			this.cron = this.value;
+		} else {
+			this.timings = this.value || [];
+			for (const timing of this.timings) {
+				if (!timing.Id) timing.Id = this.$helpers.guid();
+				if (!timing.Name) {
+					timing.Name = this.getMacroName(timing.Cron);
+				}
+				if (!timing.TimeZone) {
+					timing.TimeZone = "UTC";
+				}
+			}
+		}
+	},
+
+	data() {
+		return {
+			currentLocalTime: null,
+			currentUTCTime: null,
+			timer: null,
+			selectedTimeZone: "UTC",
+			currentTiming: null,
+			timings: [],
+			cron: "",
+			options: {
+				macros: [],
+				timeZones: []
+			},
+			visible: {
+				timeZone: false
+			},
+			cronMacros: [
+				{
+					text: "Every minute",
+					name: "every_minute",
+					value: "* * * * *",
+					isCustom: false
+				},
+				{
+					text: "Hourly",
+					name: "every_hour",
+					value: "0 * * * *",
+					isCustom: false,
+					hasMinuteSelector: true
+				},
+				{
+					text: "Daily",
+					name: "every_day",
+					value: "0 0 * * *",
+					isCustom: false,
+					hasHourSelector: true,
+					hasMinuteSelector: true
+				},
+				{
+					text: "Weekly",
+					name: "every_week",
+					value: "0 0 * * 0",
+					hasDaySelector: true,
+					hasHourSelector: true,
+					hasMinuteSelector: true,
+					isCustom: false
+				},
+				{
+					text: "Monthly",
+					name: "every_month",
+					value: "0 0 1 * *",
+					isCustom: false,
+					hasHourSelector: true,
+					hasMinuteSelector: true
+				},
+				{
+					text: "Annually",
+					name: "every_year",
+					value: "0 0 1 1 *",
+					isCustom: false,
+					hasHourSelector: true,
+					hasMinuteSelector: true
+				},
+				{
+					text: "Custom",
+					name: "custom",
+					value: "",
+					isCustom: true
+				}
+			],
+			weekDays: [
+				{ id: 0, label: "Sunday" },
+				{ id: 1, label: "Monday" },
+				{ id: 2, label: "Tuesday" },
+				{ id: 3, label: "Wednesday" },
+				{ id: 4, label: "Thursday" },
+				{ id: 5, label: "Friday" },
+				{ id: 6, label: "Saturday" }
+			]
+		};
+	},
+
+	methods: {
+		setTime() {
+			this.currentLocalTime = moment().format("YYYY-MM-DD HH:mm:ss");
+			this.currentUTCTime = moment()
+				.utc()
+				.format("YYYY-MM-DD HH:mm:ss");
+		},
+		getCronPart(timing, part) {
+			let cronParts = timing.Cron.split(" ");
+
+			let partIndex = -1;
+			if (part === "minute") partIndex = cronParts.length === 6 ? 1 : 0;
+			if (part === "hour") partIndex = cronParts.length === 6 ? 2 : 1;
+			if (partIndex === -1) return "";
+
+			return cronParts[partIndex];
+		},
+
+		changeCronPart(timing, part, value) {
+			let cronParts = timing.Cron.split(" ");
+
+			let partIndex = -1;
+			if (part === "minute") partIndex = cronParts.length === 6 ? 1 : 0;
+			if (part === "hour") partIndex = cronParts.length === 6 ? 2 : 1;
+			if (part === "day") partIndex = cronParts.length - 1;
+
+			cronParts[partIndex] = value;
+			timing.Cron = cronParts.join(" ");
+		},
+
+		setTimeZone() {
+			this.currentTiming.TimeZone = this.selectedTimeZone;
+			this.$emit("input", this.timings);
+			this.selectedTimeZone = "UTC";
+			this.visible.timeZone = false;
+		},
+
+		showTimeZoneSelector(timing) {
+			this.currentTiming = timing;
+			this.selectedTimeZone = timing.TimeZone || "UTC";
+			this.visible.timeZone = true;
+		},
+
+		getNextInterval(timing, format) {
+			if (!timing.Cron) return "";
+			try {
+				const interval = cronParser.parseExpression(timing.Cron, {
+					tz: timing.TimeZone
+				});
+				const nextSchedule = interval.next();
+				if (format) return moment(nextSchedule.toDate()).format(format);
+				return moment(nextSchedule.toDate()).fromNow();
+			} catch (error) {
+				return null;
+			}
+		},
+
+		selectedMacro(timing, newValue, oldValue) {
+			let macro = this.cronMacros.find(x => x.name === newValue);
+
+			if (!macro) return;
+
+			timing.Name = macro.name;
+			timing.IsCustom = macro.isCustom;
+			if (!timing.TimeZone) timing.TimeZone = "UTC";
+
+			if (oldValue === newValue) return;
+
+			if (!timing.Cron) timing.Cron = macro.value;
+			else if (timing.Name !== "custom") timing.Cron = macro.value;
+		},
+
+		isCustom(cron) {
+			let macro = this.cronMacros.find(x => x.value === cron);
+			return macro === null || macro.isCustom;
+		},
+
+		getMacro(name) {
+			let macro = this.cronMacros.find(x => x.name === name);
+			return macro || {};
+		},
+
+		getMacroName(cron) {
+			let macro = this.cronMacros.find(x => x.value === cron);
+			return macro ? macro.name : "custom";
+		},
+
+		add() {
+			if (this.timings.length >= this.maxTiming) return;
+			this.addTiming();
+		},
+
+		addTiming() {
+			this.timings.push({
+				Id: this.$helpers.guid(),
+				Cron: "0 0 * * *",
+				IsCustom: false,
+				Name: "every_day",
+				TimeZone: "UTC",
+				WeekDay: 1
+			});
+		},
+
+		remove(index) {
+			this.timings.splice(index, 1);
+		}
+	}
+};
+</script>

package/src/components/Cron/index.js

@@ -1,3 +1,3 @@
 import Cron from "./Cron.vue";
-
-export default Cron;
+import CronModern from "./CronModern.vue";
+export { Cron, CronModern };

package/src/components/Date/DatePicker.vue

@@ -1,6 +1,7 @@
 <template>
 	<div class="datePicker">
 		<date-picker
+			:ref="refKey"
 			:value="datetime"
 			@input="updateDate($event)"
 			:type="type"
@@ -15,6 +16,8 @@
 			:clearable="clearable"
 			:second-options="[]"
 			:shortcuts="!range && shortcutsEnable ? shortcuts : []"
+			@change="handleChange"
+			:open.sync="open"
 		>
 			<template #header="{ emit }" v-if="!shortcutsEnable && todayHeader">
 				<button class="mx-btn mx-btn-text" @click="emit(new Date())">
@@ -72,6 +75,7 @@ export default {
 	},
 	data() {
 		return {
+			open: false,
 			momentFormat: {
 				stringify: date => {
 					return date ? moment(date).format(this.dateFormat) : "";
@@ -107,6 +111,15 @@ export default {
 		}
 	},
 	props: {
+		closeOnSelect: {
+			type: Boolean,
+			default: true
+		},
+		refKey: {
+			required: false,
+			type: String,
+			default: "muiDatePicker"
+		},
 		/**
 		 * value.
 		 * It's used to bind v-model value from parent component to child component's input value.
@@ -286,6 +299,11 @@ export default {
 		}
 	},
 	methods: {
+		handleChange(value, type) {
+			if (!this.range && this.type === "datetime") {
+				if (type === "minute") this.open = false;
+			}
+		},
 		/**
 		 * updateDate
 		 * @input update value when input value changes

package/src/functions/helpers.js

@@ -0,0 +1,23 @@
+export default {
+	guid() {
+		function s4() {
+			return Math.floor((1 + Math.random()) * 0x10000)
+				.toString(16)
+				.substring(1);
+		}
+		return (
+			s4() +
+			s4() +
+			"-" +
+			s4() +
+			"-" +
+			s4() +
+			"-" +
+			s4() +
+			"-" +
+			s4() +
+			s4() +
+			s4()
+		);
+	}
+};

package/src/index.js

@@ -1,3 +1,5 @@
+import Vue from "vue";
+
 // ***Components***
 import Loader from "./components/Loader";
 import { Button, ButtonCore } from "./components/Button";
@@ -20,7 +22,7 @@ import {
 	RemoveAlert,
 	UnsavedChangesAlert
 } from "./components/Modal";
-import Cron from "./components/Cron";
+import { Cron, CronModern } from "./components/Cron";
 import Popover from "./components/Popover";
 import TagInput from "./components/TagInput";
 import Icon from "./components/Icon";
@@ -45,6 +47,12 @@ import Notification from "./functions/notification";
 import Alerte from "./functions/alert";
 // ***Functions***
 
+import Helpers from "./functions/helpers";
+/** VUE PROTOTYPE -> START */
+Vue.prototype.$helpers = Helpers;
+
+/** VUE PROTOTYPE -> END */
+
 // ***Plugins***
 import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap-vue/dist/bootstrap-vue.css";
@@ -133,6 +141,7 @@ export default {
 		Vue.component(Timeline.name, Timeline);
 		Vue.component(TimelineItem.name, TimelineItem);
 		Vue.component(ToggleSwitch.name, ToggleSwitch);
+		Vue.component(CronModern.name, CronModern);
 
 		Vue.use(Notification);
 		Vue.use(Alerte);