comand-component-library 4.1.91 → 4.1.92

package/src/components/CmdMailToolFilter.vue

@@ -0,0 +1,210 @@
+<template>
+    <div class="cmd-mail-tool-filter align-items-center">
+        <!-- begin CmdHeadline -->
+        <CmdHeadline v-if="headlineText" :headlineText="headlineText" :headlineLevel="headlineLevel"/>
+        <!-- end CmdHeadline -->
+
+        <div class="flex-container horizontal align-items-center">
+            <!-- begin CmdFormElement -->
+            <CmdFormElement
+                element="input"
+                type="search"
+                :placeholder="'Search ' + boxType"
+                :showSearchButton="false"
+                :id="'search-' + boxType"
+                :labelText="'Search ' + boxType"
+                :showLabel="false"
+                v-model="searchFilterText"
+            />
+            <!-- end CmdFormElement -->
+
+            <!-- begin CmdFormElement -->
+            <CmdFormElement
+                element="input"
+                type="checkbox"
+                name="search-filters"
+                id="search-subject"
+                labelText="Search subjects"
+                v-model="searchFilterOptions"
+                inputValue="subjects"
+            />
+            <!-- end CmdFormElement -->
+
+            <!-- begin CmdFormElement -->
+            <CmdFormElement
+                element="input"
+                type="checkbox"
+                name="search-filters"
+                :id="'search-' + senderReceiver"
+                :labelText="'Search ' + senderReceiver"
+                v-model="searchFilterOptions"
+                :inputValue="senderReceiver"
+            />
+            <!-- end CmdFormElement -->
+        </div>
+        <div class="flex-container horizontal sort-wrapper">
+            <!-- begin link sort ascending -->
+            <a v-if="sortOrderAsc" href="#" @click.prevent="sortByDate('asc')" :title="linkSortAscending.title">
+                <span v-if="linkSortAscending.text">{{ linkSortAscending.text }}</span>
+                <span v-if="linkSortAscending.iconClass" :class="linkSortAscending.iconClass"></span>
+            </a>
+            <!-- end link sort ascending -->
+
+            <!-- begin link sort descending -->
+            <a v-else href="#" @click.prevent="sortByDate('desc')" :title="linkSortDescending.title">
+                <span v-if="linkSortDescending.text">{{ linkSortDescending.text }}</span>
+                <span v-if="linkSortDescending.iconClass" :class="linkSortDescending.iconClass"></span>
+            </a>
+            <!-- end link sort descending -->
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "CmdMailToolFilter",
+    data() {
+        return {
+            searchFilterText: "",
+            searchFilterOptions: [],
+            sortOrderAsc: Boolean
+        }
+    },
+    props: {
+        modelValue: {
+            type: Object,
+        },
+        /**
+         * define boxType
+         *
+         * @allowedValues: "inbox", "outbox"
+         */
+        boxType: {
+            type: String,
+            default: "inbox"
+        },
+        /**
+         * define link for sorting mails ascending
+         */
+        linkSortAscending: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-sort-asc-arrows",
+                    text: "asc (0-9)",
+                    title: "Sort mails by date/time ascending"
+                }
+            }
+        },
+        /**
+         * define link for sorting mails descending
+         */
+        linkSortDescending: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-sort-desc-arrows",
+                    text: "desc (9-0)",
+                    title: "Sort mails by date/time descending"
+                }
+            }
+        },
+        /**
+         * define properties for CmdHeadline-component for inbox
+         */
+        cmdHeadlineInbox: {
+            type: Object,
+            default() {
+                return {
+                    headlineText: "Inbox",
+                    headlineLevel: 3
+                }
+            }
+        },
+        /**
+         * define properties for CmdHeadline-component for outbox
+         */
+        cmdHeadlineOutbox: {
+            type: Object,
+            default() {
+                return {
+                    headlineText: "Outbox",
+                    headlineLevel: 3
+                }
+            }
+        }
+    },
+    computed: {
+        headlineText() {
+            return this.boxType === "inbox" ? this.cmdHeadlineInbox?.headlineText : this.cmdHeadlineOutbox?.headlineText
+        },
+        headlineLevel() {
+            return this.boxType === "inbox" ? this.cmdHeadlineInbox?.headlineLevel : this.cmdHeadlineOutbox?.headlineLevel
+        },
+        senderReceiver() {
+            return this.boxType === "inbox" ? "senders" : "receivers"
+        }
+    },
+    methods: {
+        sortByDate(sortOrder) {
+            this.sortOrderAsc = !this.sortOrderAsc
+            // todo build watcher
+        }
+    },
+    watch: {
+        modelValue: {
+            handler() {
+                this.searchFilterText = this.modelValue?.searchFilterText || ""
+                this.searchFilterOptions = this.modelValue?.searchFilterOptions || ["subjects", "senders"]
+            },
+            deep: true,
+            immediate: true
+        },
+        searchFilterText: {
+            handler() {
+                this.$emit("update:modelValue", {
+                    searchFilterOptions: this.searchFilterOptions,
+                    searchFilterText: this.searchFilterText
+                })
+            },
+            immediate: true
+        },
+        searchFilterOptions: {
+            handler() {
+                this.$emit("update:modelValue", {
+                    searchFilterText: this.searchFilterText,
+                    searchFilterOptions: this.searchFilterOptions
+                })
+            },
+            immediate: true
+        }
+    }
+}
+</script>
+
+<style>
+/* begin cmd-mail-tool-filter-------------------------------------------------------------------------------------------- */
+.cmd-mail-tool-filter {
+    display: flex;
+    padding: var(--default-padding);
+    background: var(--light-gray);
+
+    & > * {
+        flex: 1;
+    }
+
+    .cmd-headline {
+        margin: 0;
+    }
+
+    .sort-wrapper {
+        text-align: right;
+
+        a {
+            text-decoration: none;
+        }
+    }
+}
+
+/* end cmd-mail-tool-filter-------------------------------------------------------------------------------------------- */
+</style>

package/src/components/CmdSiteHeader.vue

@@ -107,7 +107,7 @@ export default {
             default: true
         },
         /**
-         * set selector the user scrolls to resize header
+         * set selector for element that scrolls content to resize header
          *
          * resizeHeaderOnScroll-property must be activated
          */

package/src/components/CmdTabs.vue

@@ -3,11 +3,11 @@
         <!-- being tab-list -->
         <ul :class="{'stretch-tabs' : stretchTabs}" role="tablist">
             <li v-for="(tab, index) in tabs" :class="{active : showTab === index}" :key="index" role="tab">
-                <a href="#" @click.prevent="setActiveTab(index)" :title="!tab.name ? tab.tooltip : undefined">
+                <a href="#" @click.prevent="setActiveTab(index)" :title="!tab.text ? tab.tooltip : undefined">
                     <!-- begin CmdIcon -->
                     <CmdIcon v-if="tab.iconClass" :iconClass="tab.iconClass" :type="tab.iconType" />
                     <!-- end CmdIcon -->
-                    <span v-if="tab.name">{{ tab.name }}</span>
+                    <span v-if="tab.text">{{ tab.text }}</span>
                 </a>
             </li>
         </ul>

package/src/mixins/CmdMailToolEntry/DefaultMessageProperties.js

@@ -0,0 +1,12 @@
+export default {
+  data() {
+    return {
+      defaultMessageProperties: {
+        "mail_tool_entry.tooltip.read_this_mail": "Read this mail",
+        "mail_tool_entry.description_label.from": "From:",
+        "mail_tool_entry.description_label.to": "To:",
+        "mail_tool_entry.description_label.subject": "Subject:"
+      }
+    }
+  }
+}

package/src/utils/address.js

@@ -0,0 +1,29 @@
+function formatAddress(address, format) {
+    let formatedAddress = ""
+
+    if (format === "eu") {
+        formatedAddress += address.street  + " " + address.number + "\n"
+        formatedAddress += address.zip + " " + address.city + "\n"
+    } else {
+        formatedAddress += address.number  + " " + address.street + "\n"
+        formatedAddress += address.city + ", "
+
+        if(address.country) {
+            formatedAddress += address.state + " "
+        }
+
+        formatedAddress += address.zip + "\n"
+    }
+
+    if(address.country) {
+        formatedAddress += address.country + "\n"
+    }
+
+    if(address.misc) {
+        formatedAddress += address.misc
+    }
+
+    return formatedAddress
+}
+
+export {formatAddress}

package/src/utils/date.js

@@ -6,11 +6,11 @@ function getDate(inputDate, operator = "+", days = 1) {
     const date = new Date(inputDate)
 
     if (operator === "+") {
-        date.setDate(date.getDate() + days);
+        date.setDate(date.getDate() + days)
     } else if (operator === '-') {
-        date.setDate(date.getDate() - days);
+        date.setDate(date.getDate() - days)
     } else {
-        throw new Error("function 'getDate' received invalid operator as parameter. Use '+' to add or '-' to subtract days.")
+        throw new Error("function 'getDate()' received invalid operator as parameter. Use '+' to add or '-' to subtract days.")
     }
 
     return date
@@ -18,15 +18,15 @@ function getDate(inputDate, operator = "+", days = 1) {
 
 function formatDate(inputDate, format = "dmy", separator= ".") {
     // Ensure the input is a valid date object or string
-    const date = new Date(inputDate);
+    const date = new Date(inputDate)
 
     if (isNaN(date)) {
-        console.error("function 'formatDate' received an invalid date as parameter. Provide date in format YYYY-MM-DD");
+        console.error("function 'formatDate()' received an invalid date as parameter. Provide date in format 'YYYY-MM-DD'");
     }
 
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0'); // months are zero-based
-    const day = String(date.getDate()).padStart(2, '0'); // days are zero-based
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0') // months are zero-based
+    const day = String(date.getDate()).padStart(2, '0') // days are zero-based
     let dateFormated = ""
 
     switch (format) {
@@ -43,19 +43,28 @@ function formatDate(inputDate, format = "dmy", separator= ".") {
     return dateFormated
 }
 
-function formatTime(timeString, format = '24') {
-    const [hourString, minute] = timeString.split(':');
-    let hour = parseInt(hourString, 10);
-
-    if (format === '12') {
-        const ampm = hour >= 12 ? 'pm' : 'am';
-        hour = hour % 12 || 12; // Convert 0 to 12 for 12 AM
-        return `${hour}:${minute} ${ampm}`;
-    } else if (format === '24') {
-        const paddedHour = hour.toString().padStart(2, '0');
-        return `${paddedHour}:${minute}`;
+function formatTime(timeString = "00:00", format = 24, textAfter = "h") {
+    const [hourString, minute] = timeString.split(":")
+    let hour = parseInt(hourString, 10) // convert hourString to integer in decimal-system
+    let time = ""
+    format = format.toString() // convert format-parameter to string to allow strings and numbers
+
+    if (format === "12") {
+        const ampm = hour >= 12 ? "pm" : "am"
+        hour = hour % 12 || 12 // Convert 0 to 12 for 12 AM
+        time = `${hour}:${minute} ${ampm}`
+        return time
+    } else if (format === "24") {
+        const paddedHour = hour.toString().padStart(2, "0");
+        time = `${paddedHour}:${minute}`
+
+        if (textAfter) {
+           time += " " + textAfter
+        }
+
+        return time
     } else {
-        throw new Error("invalid format for function 'formatTime' specified. Use '12' or '24'.");
+        throw new Error("function 'formatTime()' received invalid format as parameter. Provide format-parameter as 12 or 24.");
     }
 }