@fy-/fws-vue 0.0.1

package/components/fws/CmsArticleBoxed.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { CalendarDaysIcon } from "@heroicons/vue/24/solid";
+
+defineProps({
+  article: {
+    type: Object,
+    required: true,
+  },
+  type: {
+    type: String,
+    default: "blog",
+  },
+});
+</script>
+
+<template>
+  <article
+    itemscope
+    itemtype="https://schema.org/Article"
+    class="p-3 flex flex-col justify-between bg-white noise rounded-lg border border-fv-neutral-200 shadow-md dark:bg-fv-neutral-800 dark:border-fv-neutral-700"
+  >
+    <meta itemprop="wordCount" :content="article.WordCount" />
+    <meta itemprop="datePublished" :content="article.CreatedAt.iso" />
+    <meta itemprop="dateModified" :content="article.UpdatedAt.iso" />
+    <meta itemprop="inLanguage" :content="article.Locale" />
+    <meta itemprop="headline" :content="article.Title" />
+    <meta
+      itemprop="thumbnailUrl"
+      v-if="article.CoverUUID"
+      :content="`https://s.nocachenocry.com/${article.CoverUUID}?vars=format=webp:resize=512x512`"
+    />
+    <RouterLink
+      :to="`/${type}/${article.Slug}`"
+      :title="article.Title"
+      :alt="article.Title"
+      ><img
+        v-if="article.CoverUUID"
+        :src="`https://s.nocachenocry.com/${article.CoverUUID}?vars=format=webp:scale_crop_center=400x195`"
+        loading="lazy"
+        :title="article.Title"
+        :alt="article.Title"
+        class="w-full rounded-lg bg-fv-neutral-800 shadow mb-3 flex-grow-0 flex-shrink-0"
+        width="400"
+        height="250"
+    /></RouterLink>
+    <h2 class="title-1 font-semibold mb-2 flex-grow-0">
+      <RouterLink
+        :to="`/${type}/${article.Slug}`"
+        :title="article.Title"
+        :alt="article.Title"
+        rel="bookmark"
+        >{{ article.Title }}</RouterLink
+      >
+    </h2>
+    <p
+      class="mb-5 font-light text-fv-neutral-500 dark:text-fv-neutral-400 flex-grow"
+      itemprop="description"
+    >
+      {{ article.Overview }}
+    </p>
+    <div class="flex justify-between items-center flex-grow-0">
+      <div class="flex justify-end items-center text-fv-neutral-500">
+        <time
+          class="text-sm inline-flex items-center justify-center gap-x-1"
+          itemprop="datePublished"
+          :content="new Date(parseInt(article.CreatedAt.unixms)).toISOString()"
+          :datetime="new Date(parseInt(article.CreatedAt.unixms)).toISOString()"
+        >
+          <CalendarDaysIcon class="w-4 h-4 -mt-0.5" />
+          {{ $formatDate(article.CreatedAt.unixms) }}
+        </time>
+        <meta
+          itemprop="dateModified"
+          :content="new Date(parseInt(article.UpdatedAt.unixms)).toISOString()"
+        />
+        <meta itemprop="inLanguage" :content="article.Language__" />
+        <meta
+          itemprop="dateModified"
+          :content="new Date(parseInt(article.UpdatedAt.unixms)).toISOString()"
+        />
+      </div>
+      <!--<span
+        ><img
+          class="h-4 shadow"
+          :src="langs[article.Locale]"
+          width="24"
+          height="16"
+          loading="lazy"
+        />
+      </span>-->
+      <RouterLink
+        :to="`/${type}/${article.Slug}`"
+        :title="article.Title"
+        :alt="article.Title"
+        class="inline-flex items-center font-medium text-primary-600 dark:text-primary-500 hover:underline"
+      >
+        {{ $t("read_more_cta") }}
+        <svg
+          class="ml-2 w-4 h-4"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+      </RouterLink>
+    </div>
+  </article>
+</template>

package/components/fws/CmsArticleSingle.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRoute } from "vue-router";
+import type { Component } from "vue";
+import { useRest } from "../../rest";
+import { LazyHead, useSeo } from "../../seo";
+import type { BreadcrumbLink } from "../../types";
+import DefaultBreadcrumb from "../ui/DefaultBreadcrumb.vue";
+
+const props = withDefaults(
+  defineProps<{
+    baseUrl: string;
+    cmsAlias: string;
+    notFound: Component;
+    baseBreadcrumb?: BreadcrumbLink[];
+  }>(),
+  {
+    baseBreadcrumb: () => [],
+  },
+);
+
+const rest = useRest();
+const post = ref<any>([]);
+const route = useRoute();
+const seo = ref<LazyHead>({});
+const is404 = ref(false);
+const getBlogPost = async () => {
+  const data = await rest(
+    `Cms/${props.cmsAlias}/Post/${route.params.slug}`,
+    "GET",
+  );
+  if (data && data.result == "success") {
+    post.value = data.data;
+    seo.value.title = post.value.Title;
+    seo.value.description = post.value.Overview;
+
+    if (post.value.CoverUUID) {
+      seo.value.image = `https://s.nocachenocry.com/${post.value.CoverUUID}?vars=format=png:resize=512x512`;
+      seo.value.imageWidth = "512";
+      seo.value.imageHeight = "512";
+      seo.value.imageType = "image/png";
+    }
+    if (post.value.Locale != "") {
+      seo.value.locale = post.value.Locale;
+    } else {
+      seo.value.locale = "en-US";
+    }
+    seo.value.canonical = `https://${props.baseUrl}/l/${seo.value.locale}/blog/${post.value.Slug}`;
+    seo.value.url = `https://${props.baseUrl}/l/${seo.value.locale}/blog/${post.value.Slug}`;
+    if (post.value.Locales && post.value.Locales.length > 1) {
+      seo.value.alternateLocales = post.value.Locales;
+    }
+  } else {
+    is404.value = true;
+  }
+};
+await getBlogPost();
+useSeo(seo);
+</script>
+<template>
+  <div>
+    <div v-if="!is404 && post">
+      <div class="items-center flex justify-center mt-3">
+        <DefaultBreadcrumb
+          v-if="baseBreadcrumb.length > 0"
+          :show-home="false"
+          :nav="[...baseBreadcrumb, { name: post.Title }]"
+          class="!hidden md:!flex"
+        />
+      </div>
+      <article
+        class="h-full flex flex-col scrollbar-hidden"
+        itemscope
+        itemtype="https://schema.org/Article"
+      >
+        <meta itemprop="wordCount" :content="post.WordCount" />
+        <meta itemprop="datePublished" :content="post.CreatedAt.iso" />
+        <meta itemprop="dateModified" :content="post.UpdatedAt.iso" />
+        <meta itemprop="inLanguage" :content="post.Locale" />
+        <meta itemprop="headline" :content="post.Title" />
+        <meta
+          itemprop="thumbnailUrl"
+          v-if="post.CoverUUID"
+          :content="`https://s.nocachenocry.com/${post.CoverUUID}?vars=format=webp:resize=512x512`"
+        />
+        <div class="py-8 container xl:max-w-6xl mx-auto px-4">
+          <h2
+            class="mb-4 text-4xl tracking-tight font-extrabold text-center text-fv-neutral-900 dark:text-white"
+          >
+            {{ post.Title }}
+          </h2>
+          <p
+            class="font-light text-center text-fv-neutral-500 dark:text-fv-neutral-400 sm:text-xl"
+          >
+            {{ post.Overview }}
+          </p>
+        </div>
+        <img
+          v-if="post.CoverUUID"
+          :src="`https://s.nocachenocry.com/${post.CoverUUID}?vars=format=webp:resize=768x768`"
+          :alt="post.Title"
+          class="h-auto rounded-xl shadow max-w-[768px] mx-auto mb-6"
+        />
+        <div class="page-clear-container relative mb-6">
+          <section
+            itemprop="articleBody"
+            class="prose dark:prose-invert max-w-6xl mx-auto"
+            v-html="post.Body"
+          ></section>
+        </div>
+      </article>
+    </div>
+    <component :is="notFound" v-if="is404" />
+  </div>
+</template>

package/components/fws/DataTable.vue

@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import { onMounted, ref, onUnmounted, watch } from "vue";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ArrowDownTrayIcon,
+} from "@heroicons/vue/24/solid";
+import DefaultPaging from "../ui/DefaultPaging.vue";
+import DefaultInput from "../ui/DefaultInput.vue";
+import { useEventBus } from "../../event-bus";
+import { useRest } from "../../rest";
+import { useRoute } from "vue-router";
+import { useStorage } from "@vueuse/core";
+interface DefaultStringObject {
+  [key: string]: string;
+}
+interface DefaultAnyObject {
+  [key: string]: any;
+}
+interface DefaultBoolObject {
+  [key: string]: boolean;
+}
+interface SortingField {
+  field: string;
+  direction: string;
+}
+const eventBus = useEventBus();
+const currentPage = ref<number>(1);
+const route = useRoute();
+const data = ref<any[]>([]);
+const paging = ref<any>(undefined);
+const perPageOptions = [
+  ["10", "10"],
+  ["25", "25"],
+  ["50", "50"],
+  ["100", "100"],
+];
+const props = withDefaults(
+  defineProps<{
+    id: string;
+    headers: DefaultStringObject;
+    sortables?: DefaultBoolObject;
+    showHeaders?: boolean;
+    exportableColumns?: string[];
+    csvFormatColumns?: Record<string, (value: any) => string>;
+    defaultPerPage?: number;
+    filtersData: DefaultAnyObject;
+    apiPath: string;
+    defaultSort?: SortingField;
+    restFunction?: Function | null;
+  }>(),
+  {
+    showHeaders: true,
+    sortables: () => ({}),
+    exportableColumns: () => [],
+    csvFormatColumns: () => ({}),
+    exportableName: "default",
+    defaultPerPage: 25,
+    defaultSort: () => ({ field: "Created", direction: "DESC" }),
+    restFunction: null,
+  },
+);
+const rest = useRest();
+const restFunction = props.restFunction ?? rest;
+const perPage = useStorage<number>(`${props.id}PerPage`, props.defaultPerPage);
+const currentSort = useStorage<SortingField>(
+  `${props.id}CurrentSort`,
+  props.defaultSort,
+);
+const getData = async (page: number = 1) => {
+  eventBus.emit("main-loading", true);
+  if (route.query.page) page = parseInt(route.query.page.toString());
+  const sort: any = {};
+  sort[currentSort.value.field] = currentSort.value.direction;
+  const requestParams = {
+    ...props.filtersData,
+    sort: sort,
+    results_per_page: perPage.value,
+    page_no: page,
+  };
+  const r = await restFunction(props.apiPath, "GET", requestParams, {
+    getBody: true,
+  });
+  currentPage.value = page;
+  data.value = [];
+  paging.value = undefined;
+  if (r && r.result == "success") {
+    data.value = r.data;
+    paging.value = r.paging;
+    eventBus.emit(`${props.id}NewData`, data.value);
+  }
+  eventBus.emit("main-loading", false);
+};
+const sortData = (key: string) => {
+  if (!props.sortables[key]) return;
+  const newSort: SortingField = {
+    field: currentSort.value.field,
+    direction: currentSort.value.direction,
+  };
+  if (key == newSort.field) {
+    if (newSort.direction == "desc") {
+      newSort.direction = "asc";
+    } else {
+      newSort.direction = "desc";
+    }
+  } else {
+    newSort.direction = "desc";
+    newSort.field = key;
+  }
+  currentSort.value = { ...newSort };
+};
+const exportToCsv = () => {
+  const header = props.exportableColumns
+    .map((column) => props.headers[column] ?? column)
+    .join(",");
+  const rows = data.value
+    .map((row) => {
+      return props.exportableColumns
+        .map((column) => {
+          let cell = row[column];
+          if (props.csvFormatColumns[column]) {
+            cell = props.csvFormatColumns[column](row);
+          }
+          return `"${cell}"`;
+        })
+        .join(",");
+    })
+    .join("\n");
+
+  const csvContent = header + "\n" + rows;
+
+  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+  const link = document.createElement("a");
+  const url = URL.createObjectURL(blob);
+  link.setAttribute("href", url);
+  link.setAttribute(
+    "download",
+    `${props.id}_${new Date().toISOString().slice(0, 10)}_Page-${
+      currentPage.value
+    }_${perPage.value}-per-page_Order-by-${currentSort.value.field}-${
+      currentSort.value.direction
+    }.csv`,
+  );
+  link.style.visibility = "hidden";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+watch(perPage, () => {
+  getData();
+});
+watch(currentSort, () => {
+  getData();
+});
+watch(
+  () => props.filtersData,
+  () => {
+    getData();
+  },
+);
+watch(
+  () => props.apiPath,
+  () => {
+    getData();
+  },
+);
+onMounted(() => {
+  eventBus.on(`${props.id}PagesGoToPage`, getData);
+  eventBus.on(`${props.id}Reload`, getData);
+  eventBus.on(`${props.id}Refresh`, getData);
+
+  getData();
+});
+onUnmounted(() => {
+  eventBus.off(`${props.id}PagesGoToPage`, getData);
+  eventBus.off(`${props.id}Reload`, getData);
+  eventBus.off(`${props.id}Refresh`, getData);
+});
+</script>
+<template>
+  <div>
+    <div
+      class="flex gap-2 justify-between items-center border-b border-fv-primary-600 mb-2 pb-2"
+    >
+      <DefaultPaging :items="paging" v-if="paging" :id="`${props.id}Pages`" />
+      <button
+        class="btn primary defaults"
+        @click="exportToCsv"
+        v-if="exportableColumns.length && data.length"
+      >
+        <ArrowDownTrayIcon class="w-4 h-4 mr-2"></ArrowDownTrayIcon
+        >{{ $t("global_table_export") }}
+      </button>
+      <DefaultInput
+        v-model="perPage"
+        :options="perPageOptions"
+        :show-label="false"
+        :id="`${id}PerPage`"
+        type="select"
+        class="w-20"
+      />
+    </div>
+
+    <div
+      class="relative overflow-x-auto border-fv-primary-600 sm:rounded-lg"
+      v-if="data.length"
+    >
+      <table
+        class="w-full text-sm text-left text-fv-neutral-500 dark:text-fv-neutral-400"
+      >
+        <thead
+          v-if="showHeaders"
+          class="text-xs text-fv-neutral-700 uppercase bg-fv-neutral-50 dark:bg-fv-neutral-800 dark:text-fv-neutral-400"
+        >
+          <tr>
+            <th
+              v-for="(header, key) in headers"
+              :key="key"
+              @click="
+                () => {
+                  if (sortables[key]) {
+                    sortData(key.toString());
+                  }
+                }
+              "
+              scope="col"
+              class="px-6 py-3 whitespace-nowrap"
+              :class="{
+                'cursor-pointer': sortables[key],
+              }"
+            >
+              {{ header }}
+              <template v-if="sortables[key] && currentSort.field == key">
+                <ArrowUpIcon
+                  v-if="currentSort.direction == 'desc'"
+                  class="inline w-3 h-3 align-top mt-0.5"
+                />
+                <ArrowDownIcon v-else class="inline w-3 h-3 align-top mt-0.5" />
+              </template>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(row, index) in data"
+            :key="index"
+            class="bg-white border-b dark:bg-fv-neutral-900 dark:border-fv-neutral-800 hover:bg-fv-neutral-50 dark:hover:bg-fv-neutral-950"
+          >
+            <td v-for="(header, key) in headers" :key="key" class="px-6 py-4">
+              <slot :name="key" :value="row">
+                <template v-if="row[key]">{{ row[key] }} </template>
+                <template v-else>{{ $t("global_table_empty_cell") }}</template>
+              </slot>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

package/components/fws/FilterData.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import useVuelidate from "@vuelidate/core";
+import { reactive } from "vue";
+import { onMounted } from "vue";
+import { onUnmounted } from "vue";
+import DefaultInput from "../ui/DefaultInput.vue";
+import { useTranslation } from "../../translations";
+import { useEventBus } from "../../event-bus";
+import DefaultDateSelection from "../ui/DefaultDateSelection.vue";
+interface FilterData {
+  label: string;
+  req: boolean;
+  uid: string;
+  type: string;
+  restValue?: string;
+  options?: any[][];
+  isHidden?: boolean;
+  default?: any | undefined;
+  formats?: Record<string, (value: any) => any>;
+  formatRestValue?: (value: any) => any;
+  onChangeValue?: (form: any, value: any) => void;
+}
+const emit = defineEmits(["update:modelValue"]);
+const state = reactive<any>({ formData: {} });
+const rules: any = { formData: {} };
+const types = reactive<any>({});
+const translate = useTranslation();
+const props = withDefaults(
+  defineProps<{
+    data?: Array<Array<FilterData>>;
+    css: string;
+    modelValue?: Record<string, unknown>;
+  }>(),
+  {
+    showHeaders: true,
+    data: () => [],
+  },
+);
+const removeUndefinedStrings = (
+  input: any,
+  undefinedValues: any[] = ["undefined"],
+) => {
+  const output: any = {};
+
+  Object.keys(input).forEach((key) => {
+    if (!undefinedValues.includes(input[key]) && input[key] !== undefined) {
+      if (!input[key]["$between"]) {
+        output[key] = input[key];
+      } else {
+        input[key]["$between"][0] =
+          input[key]["$between"][0] == "" || input[key]["$between"][0] == null
+            ? undefined
+            : input[key]["$between"][0];
+        input[key]["$between"][1] =
+          input[key]["$between"][1] == "" || input[key]["$between"][1] == null
+            ? undefined
+            : input[key]["$between"][1];
+        if (
+          input[key]["$between"][0] !== undefined ||
+          input[key]["$between"][1] !== undefined
+        ) {
+          output[key] = input[key];
+        }
+      }
+    }
+  });
+
+  return output;
+};
+
+const formatValues = (obj: any) => {
+  props.data.forEach((group) => {
+    group.forEach((f) => {
+      if (f.formats && f.formats[f.type]) {
+        obj[f.uid] = f.formats[f.type](obj[f.uid]);
+      }
+      if (f.formatRestValue) {
+        obj[f.uid] = f.formatRestValue(obj[f.uid]);
+      }
+    });
+  });
+  return removeUndefinedStrings(obj, ["undefined", ""]);
+};
+
+const updateForms = () => {
+  state.formData = {};
+  rules.formData = {};
+  props.data.forEach((group) => {
+    group.forEach((f) => {
+      state.formData[f.uid] =
+        typeof f.default == "object" && f.default
+          ? JSON.parse(JSON.stringify(f.default))
+          : f.default;
+
+      types[f.uid] = f.type;
+
+      if (f.options && f.options.length) {
+        f.options = f.options.map((status) => {
+          const [statusKey, statusValue] = status;
+          const translatedValue = translate(statusValue);
+          return [statusKey, translatedValue];
+        });
+      }
+      rules.formData[f.uid] = {};
+    });
+  });
+  emit("update:modelValue", formatValues({ ...state.formData }));
+};
+updateForms();
+const v$ = useVuelidate(rules, state);
+
+const submitForm = () => {
+  emit("update:modelValue", formatValues({ ...state.formData }));
+};
+const resetForm = () => {
+  updateForms();
+};
+const eventBus = useEventBus();
+onMounted(() => {
+  eventBus.on("resetFilters", resetForm);
+});
+onUnmounted(() => {
+  eventBus.off("resetFilters", resetForm);
+});
+</script>
+<template>
+  <form @submit.prevent="() => submitForm()">
+    <div :class="css">
+      <div v-for="(g, i) in data" :key="`index_${i}`">
+        <template v-for="f in g" :key="f.uid">
+          <template v-if="!f.isHidden">
+            <DefaultInput
+              :type="f.type"
+              :label="f.label"
+              :id="f.uid"
+              v-if="['text', 'select', 'date', 'email'].includes(f.type)"
+              :options="f.options ? f.options : [[]]"
+              v-model="state.formData[f.uid]"
+              :errorVuelidate="v$.formData[f.uid].$errors"
+              class="mb-2"
+              @change="
+                (ev: any) => {
+                  if (f.onChangeValue) {
+                    f.onChangeValue(state.formData, ev);
+                  }
+                }
+              "
+            />
+            <DefaultDateSelection
+              :id="f.uid"
+              :label="f.label"
+              v-if="f.type === 'range'"
+              mode="interval"
+              v-model="state.formData[f.uid]"
+              class="mb-2"
+            />
+          </template>
+        </template>
+      </div>
+    </div>
+
+    <div class="flex justify-between mt-2 gap-x-2">
+      <button type="submit" class="btn defaults primary">
+        {{ $t("filters_search_cta") }}
+      </button>
+      <button
+        type="reset"
+        class="btn defaults neutral"
+        @click.prevent="
+          () => {
+            resetForm();
+          }
+        "
+      >
+        {{ $t("filters_clear_cta") }}
+      </button>
+    </div>
+  </form>
+</template>