@ozdao/martyrs 0.2.505 → 0.2.507

package/dist/martyrs/src/modules/community/components/pages/Posts.vue.cjs

@@ -0,0 +1,431 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const vueRouter = require("vue-router");
+const Feed = require("../../../../components/Feed/Feed.vue.cjs");
+const Filters = require("../../../globals/views/components/sections/Filters.vue2.cjs");
+const Spoiler = require("../../../../components/Spoiler/Spoiler.vue2.cjs");
+const Field = require("../../../../components/Field/Field.vue.cjs");
+const Checkbox = require("../../../../components/Checkbox/Checkbox.vue.cjs");
+const Calendar = require("../../../../components/Calendar/Calendar.vue2.cjs");
+const Popup = require("../../../../components/Popup/Popup.vue.cjs");
+const CardBlogpost = require("../blocks/CardBlogpost.vue.cjs");
+const IconPlus = require("../../../icons/navigation/IconPlus.vue.cjs");
+const IconChevronBottom = require("../../../icons/navigation/IconChevronBottom.vue.cjs");
+const auth = require("../../../auth/views/store/auth.cjs");
+const globals = require("../../../globals/views/store/globals.cjs");
+const blogposts = require("../../store/blogposts.cjs");
+const organizations = require("../../../organizations/store/organizations.cjs");
+const mixins = require("../../../globals/views/mixins/mixins.cjs");
+const _hoisted_1 = { class: "pos-relative" };
+const _hoisted_2 = {
+  key: 0,
+  class: "pd-medium flex-v-center flex-nowrap flex"
+};
+const _hoisted_3 = { class: "cols-2-1_3 br-1px br-solid br-light z-index-3 pos-relative" };
+const _hoisted_4 = { class: "o-y-scroll br-r br-solid br-light pd-medium z-index-2 desktop-only h-100 pos-relative" };
+const _hoisted_5 = { class: "w-100 o-y-scroll h-100" };
+const _hoisted_6 = { class: "mn-b-medium" };
+const _hoisted_7 = { class: "gap-micro" };
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = { class: "cursor-pointer w-100 flex-v-center flex-nowrap flex" };
+const _hoisted_10 = { class: "h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra" };
+const _hoisted_11 = { class: "mn-t-small" };
+const _hoisted_12 = { class: "cursor-pointer w-100 flex-v-center flex-nowrap flex" };
+const _hoisted_13 = { class: "h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra" };
+const _hoisted_14 = { class: "mn-t-small" };
+const _hoisted_15 = ["onClick"];
+const _hoisted_16 = { class: "cursor-pointer w-100 flex-v-center flex-nowrap flex" };
+const _hoisted_17 = { class: "h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra" };
+const _hoisted_18 = { class: "mn-t-small" };
+const _hoisted_19 = { class: "w-100 rows-1 pd-thin pos-relative o-hidden" };
+const _hoisted_20 = { class: "mn-b-thin w-100 o-y-scroll scroll-hide scroll-snap-type-x-mandatory scroll-pd-regular" };
+const _hoisted_21 = { class: "gap-thin flex-nowrap flex" };
+const _hoisted_22 = ["onClick"];
+const _hoisted_23 = { class: "flex gap-small" };
+const _sfc_main = {
+  __name: "Posts",
+  props: {
+    organization: {
+      type: Object,
+      default: null
+    }
+  },
+  setup(__props) {
+    const route = vueRouter.useRoute();
+    const router = vueRouter.useRouter();
+    const { hasAccess, formatDate } = mixins.useGlobalMixins();
+    const postCategories = vue.ref([
+      { label: "All Posts", value: "all" },
+      { label: "News", value: "news" },
+      { label: "Updates", value: "updates" },
+      { label: "Events", value: "events" },
+      { label: "Announcements", value: "announcements" },
+      { label: "Stories", value: "stories" }
+    ]);
+    const selectedCategory = vue.ref("all");
+    const searchTag = vue.ref("");
+    const selectedTags = vue.ref([]);
+    const availableTags = vue.ref(["featured", "important", "trending", "community", "official"]);
+    const filteredTags = vue.computed(() => {
+      if (!searchTag.value) return availableTags.value;
+      return availableTags.value.filter(
+        (tag) => tag.toLowerCase().includes(searchTag.value.toLowerCase())
+      );
+    });
+    const dateRangeOptions = vue.ref([
+      { label: "All Time", value: "all" },
+      { label: "Today", value: "today" },
+      { label: "This Week", value: "week" },
+      { label: "This Month", value: "month" },
+      { label: "This Year", value: "year" }
+    ]);
+    const selectedDateRange = vue.ref("all");
+    const showDatePickerPopup = vue.ref(false);
+    const selectedDates = vue.ref(null);
+    const tempSelectedDates = vue.ref(null);
+    const showMyPostsOnly = vue.ref(false);
+    const availableFilters = vue.ref([
+      {
+        title: "Category",
+        value: "category",
+        type: "radio",
+        options: postCategories.value
+      },
+      {
+        title: "Status",
+        value: "status",
+        type: "radio",
+        options: [
+          { label: "Published", value: "published" },
+          { label: "Draft", value: "draft" },
+          { label: "Archived", value: "archived" }
+        ]
+      }
+    ]);
+    const selectedFilters = vue.ref({
+      category: "all",
+      status: "published"
+    });
+    const selectCategory = (category) => {
+      selectedCategory.value = category;
+      selectedFilters.value.category = category;
+    };
+    const selectDateRange = (range) => {
+      selectedDateRange.value = range;
+      const today = /* @__PURE__ */ new Date();
+      switch (range) {
+        case "all":
+          selectedDates.value = null;
+          break;
+        case "today":
+          selectedDates.value = {
+            start: today,
+            end: today
+          };
+          break;
+        case "week":
+          const weekStart = new Date(today);
+          weekStart.setDate(today.getDate() - today.getDay());
+          selectedDates.value = {
+            start: weekStart,
+            end: today
+          };
+          break;
+        case "month":
+          const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
+          selectedDates.value = {
+            start: monthStart,
+            end: today
+          };
+          break;
+        case "year":
+          const yearStart = new Date(today.getFullYear(), 0, 1);
+          selectedDates.value = {
+            start: yearStart,
+            end: today
+          };
+          break;
+      }
+    };
+    const applyDateFilter = () => {
+      selectedDates.value = tempSelectedDates.value;
+      selectedDateRange.value = "custom";
+      showDatePickerPopup.value = false;
+    };
+    const clearFilters = () => {
+      selectedCategory.value = "all";
+      selectedTags.value = [];
+      selectedDateRange.value = "all";
+      selectedDates.value = null;
+      showMyPostsOnly.value = false;
+      searchTag.value = "";
+      selectedFilters.value = {
+        category: "all",
+        status: "published"
+      };
+    };
+    globals.state.navigation_bar.actions = [{
+      component: IconPlus.default,
+      props: {
+        fill: "rgb(var(--main))"
+      },
+      condition: () => auth.state.user && auth.state.user._id,
+      action: () => route.params._id ? router.push({ name: "Organization_PostAdd", params: { _id: route.params._id } }) : router.push({ name: "CreateBlogPost" })
+    }];
+    vue.onMounted(async () => {
+      if (route.params._id) {
+        await organizations.actions.read({ _id: route.params._id });
+      }
+    });
+    vue.onUnmounted(() => {
+      globals.state.navigation_bar.actions = [];
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.unref(route).name !== "Organization" && !_ctx.MOBILE_APP ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_2, [
+          _cache[13] || (_cache[13] = vue.createElementVNode("h2", { class: "mn-r-medium" }, "Posts", -1)),
+          vue.unref(hasAccess)(vue.unref(route).params._id, "posts", "create", auth.state.accesses, auth.state.access.roles) ? (vue.openBlock(), vue.createElementBlock("button", {
+            key: 0,
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$router.push({
+              name: vue.unref(route).params?._id ? "Organization_PostAdd" : "CreateBlogPost"
+            })),
+            class: "radius-100 i-big hover-scale-1 cursor-pointer t-white bg-second"
+          }, " + ")) : vue.createCommentVNode("", true)
+        ])) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", _hoisted_3, [
+          vue.createElementVNode("div", _hoisted_4, [
+            vue.createElementVNode("div", _hoisted_5, [
+              vue.createElementVNode("div", _hoisted_6, [
+                _cache[14] || (_cache[14] = vue.createElementVNode("h4", { class: "mn-b-small" }, "Categories", -1)),
+                vue.createElementVNode("div", _hoisted_7, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(postCategories.value, (category) => {
+                    return vue.openBlock(), vue.createElementBlock("div", {
+                      key: category.value,
+                      onClick: ($event) => selectCategory(category.value),
+                      class: vue.normalizeClass([{ "bg-light": selectedCategory.value === category.value }, "pd-small radius-small cursor-pointer hover-bg-light transition-all"])
+                    }, vue.toDisplayString(category.label), 11, _hoisted_8);
+                  }), 128))
+                ])
+              ]),
+              vue.createVNode(Spoiler.default, {
+                class: "o-hidden mn-b-medium",
+                status: true
+              }, {
+                header: vue.withCtx(({ isOpen }) => [
+                  vue.createElementVNode("div", _hoisted_9, [
+                    _cache[15] || (_cache[15] = vue.createElementVNode("h4", { class: "w-100" }, "Tags", -1)),
+                    vue.createElementVNode("div", _hoisted_10, [
+                      vue.createVNode(IconChevronBottom.default, {
+                        class: vue.normalizeClass([{ "rotate-180 mn-t-micro-negative": isOpen }, "i-regular"]),
+                        fill: "rgb(var(--black))"
+                      }, null, 8, ["class"])
+                    ])
+                  ])
+                ]),
+                content: vue.withCtx(() => [
+                  vue.createElementVNode("div", _hoisted_11, [
+                    vue.createVNode(Field.default, {
+                      modelValue: searchTag.value,
+                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchTag.value = $event),
+                      placeholder: "Search tags...",
+                      type: "text",
+                      class: "w-100 bg-light pd-small radius-small mn-b-small"
+                    }, null, 8, ["modelValue"]),
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredTags.value, (tag) => {
+                      return vue.openBlock(), vue.createBlock(Checkbox.default, {
+                        key: tag,
+                        checkbox: selectedTags.value,
+                        "onUpdate:checkbox": _cache[2] || (_cache[2] = ($event) => selectedTags.value = $event),
+                        label: tag,
+                        value: tag,
+                        mode: "checkbox",
+                        class: "mn-b-micro"
+                      }, null, 8, ["checkbox", "label", "value"]);
+                    }), 128))
+                  ])
+                ]),
+                _: 1
+              }),
+              vue.createVNode(Spoiler.default, {
+                class: "o-hidden mn-b-medium",
+                status: true
+              }, {
+                header: vue.withCtx(({ isOpen }) => [
+                  vue.createElementVNode("div", _hoisted_12, [
+                    _cache[16] || (_cache[16] = vue.createElementVNode("h4", { class: "w-100" }, "Date Range", -1)),
+                    vue.createElementVNode("div", _hoisted_13, [
+                      vue.createVNode(IconChevronBottom.default, {
+                        class: vue.normalizeClass([{ "rotate-180 mn-t-micro-negative": isOpen }, "i-regular"]),
+                        fill: "rgb(var(--black))"
+                      }, null, 8, ["class"])
+                    ])
+                  ])
+                ]),
+                content: vue.withCtx(() => [
+                  vue.createElementVNode("div", _hoisted_14, [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(dateRangeOptions.value, (option) => {
+                      return vue.openBlock(), vue.createElementBlock("div", {
+                        key: option.value,
+                        onClick: ($event) => selectDateRange(option.value),
+                        class: vue.normalizeClass([{ "bg-light": selectedDateRange.value === option.value }, "pd-small radius-small cursor-pointer hover-bg-light transition-all mn-b-micro"])
+                      }, vue.toDisplayString(option.label), 11, _hoisted_15);
+                    }), 128)),
+                    vue.createElementVNode("div", {
+                      onClick: _cache[3] || (_cache[3] = () => {
+                        tempSelectedDates.value = selectedDates.value;
+                        showDatePickerPopup.value = true;
+                      }),
+                      class: vue.normalizeClass([{ "bg-light": selectedDateRange.value === "custom" }, "pd-small radius-small cursor-pointer hover-bg-light transition-all mn-b-micro"])
+                    }, vue.toDisplayString(selectedDates.value ? `${vue.unref(formatDate)(selectedDates.value.start, { dayMonth: true, language: "en" })} - ${vue.unref(formatDate)(selectedDates.value.end, { dayMonth: true, language: "en" })}` : "Select custom dates"), 3)
+                  ])
+                ]),
+                _: 1
+              }),
+              vue.createVNode(Spoiler.default, {
+                class: "o-hidden mn-b-medium",
+                status: true
+              }, {
+                header: vue.withCtx(({ isOpen }) => [
+                  vue.createElementVNode("div", _hoisted_16, [
+                    _cache[17] || (_cache[17] = vue.createElementVNode("h4", { class: "w-100" }, "Author", -1)),
+                    vue.createElementVNode("div", _hoisted_17, [
+                      vue.createVNode(IconChevronBottom.default, {
+                        class: vue.normalizeClass([{ "rotate-180 mn-t-micro-negative": isOpen }, "i-regular"]),
+                        fill: "rgb(var(--black))"
+                      }, null, 8, ["class"])
+                    ])
+                  ])
+                ]),
+                content: vue.withCtx(() => [
+                  vue.createElementVNode("div", _hoisted_18, [
+                    vue.createVNode(Checkbox.default, {
+                      label: "My Posts Only",
+                      checkbox: showMyPostsOnly.value,
+                      "onUpdate:checkbox": _cache[4] || (_cache[4] = ($event) => showMyPostsOnly.value = $event),
+                      mode: "checkbox",
+                      class: "mn-b-micro"
+                    }, null, 8, ["checkbox"])
+                  ])
+                ]),
+                _: 1
+              }),
+              vue.createElementVNode("button", {
+                onClick: clearFilters,
+                class: "bg-main w-100 button mn-t-medium"
+              }, " Clear Filters ")
+            ])
+          ]),
+          vue.createElementVNode("div", _hoisted_19, [
+            vue.createVNode(Filters.default, {
+              filters: availableFilters.value,
+              "onUpdate:filters": _cache[5] || (_cache[5] = ($event) => availableFilters.value = $event),
+              selected: selectedFilters.value,
+              "onUpdate:selected": _cache[6] || (_cache[6] = ($event) => selectedFilters.value = $event)
+            }, null, 8, ["filters", "selected"]),
+            vue.createElementVNode("div", _hoisted_20, [
+              vue.createElementVNode("div", _hoisted_21, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(postCategories.value, (category) => {
+                  return vue.openBlock(), vue.createElementBlock("div", {
+                    key: category.value,
+                    onClick: ($event) => selectCategory(category.value),
+                    class: vue.normalizeClass([{ "bg-main t-white": selectedCategory.value === category.value }, "flex-child-default bg-light flex t-nowrap pd-medium radius-medium cursor-pointer hover-bg-light transition-all"])
+                  }, vue.toDisplayString(category.label), 11, _hoisted_22);
+                }), 128))
+              ])
+            ]),
+            vue.createVNode(Feed.default, {
+              search: true,
+              filter: blogposts.state.filter,
+              "onUpdate:filter": _cache[7] || (_cache[7] = ($event) => blogposts.state.filter = $event),
+              sort: blogposts.state.sort,
+              "onUpdate:sort": _cache[8] || (_cache[8] = ($event) => blogposts.state.sort = $event),
+              showLoadMore: false,
+              states: {
+                empty: {
+                  title: "No Blog Posts Found",
+                  description: "Currently, there are no posts available in this blog."
+                }
+              },
+              store: {
+                read: (options) => blogposts.read(options),
+                state: blogposts.state
+              },
+              options: {
+                limit: 12,
+                status: "published",
+                user: auth.state.user._id,
+                owner: vue.unref(route).params._id || null,
+                category: selectedCategory.value !== "all" ? selectedCategory.value : null,
+                tags: selectedTags.value.length > 0 ? selectedTags.value : null,
+                author: showMyPostsOnly.value ? auth.state.user._id : null,
+                dateStart: selectedDates.value?.start,
+                dateEnd: selectedDates.value?.end,
+                search: vue.unref(route).query.search
+              },
+              class: "cols-3 pos-relative w-100 rows-1 gap-thin"
+            }, {
+              default: vue.withCtx(({
+                items
+              }) => [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (item) => {
+                  return vue.openBlock(), vue.createBlock(CardBlogpost.default, {
+                    key: item._id,
+                    blogpost: item,
+                    user: auth.state.user._id,
+                    class: "h-max-40r bg-light radius-medium cursor-pointer hover-scale-1 transition-all",
+                    onClick: ($event) => _ctx.$router.push({
+                      name: vue.unref(route).params._id ? "Organization_BlogPost" : "BlogPost",
+                      params: {
+                        _id: vue.unref(route).params._id,
+                        url: item.url
+                      }
+                    })
+                  }, null, 8, ["blogpost", "user", "onClick"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["filter", "sort", "store", "options"]),
+            vue.unref(hasAccess)(vue.unref(route).params._id, "posts", "create", auth.state.accesses, auth.state.access.roles) ? (vue.openBlock(), vue.createElementBlock("button", {
+              key: 0,
+              onClick: _cache[9] || (_cache[9] = ($event) => _ctx.$router.push({
+                name: vue.unref(route).params?._id ? "Organization_PostAdd" : "CreateBlogPost"
+              })),
+              class: "mn-t-medium bg-main button w-100"
+            }, " Create New Post ")) : vue.createCommentVNode("", true)
+          ])
+        ]),
+        vue.createVNode(Popup.default, {
+          isPopupOpen: showDatePickerPopup.value,
+          onClosePopup: _cache[12] || (_cache[12] = ($event) => showDatePickerPopup.value = false),
+          class: "pd-medium bg-white radius-medium",
+          style: { "min-width": "350px" }
+        }, {
+          default: vue.withCtx(() => [
+            _cache[18] || (_cache[18] = vue.createElementVNode("h3", { class: "mn-b-medium" }, "Select Date Range", -1)),
+            vue.createVNode(Calendar.default, {
+              date: tempSelectedDates.value,
+              "onUpdate:date": _cache[10] || (_cache[10] = ($event) => tempSelectedDates.value = $event),
+              allowRange: true,
+              disablePastDates: false,
+              class: "mn-b-medium"
+            }, null, 8, ["date"]),
+            vue.createElementVNode("div", _hoisted_23, [
+              vue.createElementVNode("button", {
+                onClick: applyDateFilter,
+                class: "bg-main button flex-child-full"
+              }, " Apply "),
+              vue.createElementVNode("button", {
+                onClick: _cache[11] || (_cache[11] = ($event) => showDatePickerPopup.value = false),
+                class: "bg-light button flex-child-full"
+              }, " Cancel ")
+            ])
+          ]),
+          _: 1
+        }, 8, ["isPopupOpen"])
+      ]);
+    };
+  }
+};
+exports.default = _sfc_main;
+//# sourceMappingURL=Posts.vue.cjs.map

package/dist/martyrs/src/modules/community/components/pages/Posts.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Posts.vue.cjs","sources":["../../../../../../../src/modules/community/components/pages/Posts.vue"],"sourcesContent":["<template>\n  <div class=\"pos-relative\">\n    <header \n      v-if=\"route.name !== 'Organization' && !MOBILE_APP\"\n      class=\"pd-medium flex-v-center flex-nowrap flex\"\n    >\n      <h2 class=\"mn-r-medium\">Posts</h2>\n      <button \n        v-if=\"hasAccess(route.params._id, 'posts', 'create', auth.state.accesses, auth.state.access.roles)\"\n        @click=\"$router.push({\n          name: route.params?._id ? 'Organization_PostAdd' : 'CreateBlogPost'\n        })\" \n        class=\"radius-100 i-big hover-scale-1 cursor-pointer t-white bg-second\">\n          +\n      </button>\n    </header>\n\n    <div class=\"cols-2-1_3 br-1px br-solid br-light z-index-3 pos-relative\">\n\n      <div class=\"o-y-scroll br-r br-solid br-light pd-medium z-index-2 desktop-only h-100 pos-relative\">\n        <div class=\"w-100 o-y-scroll h-100\">\n          <!-- Categories -->\n          <div class=\"mn-b-medium\">\n            <h4 class=\"mn-b-small\">Categories</h4>\n            <div class=\"gap-micro\">\n              <div\n                v-for=\"category in postCategories\"\n                :key=\"category.value\"\n                @click=\"selectCategory(category.value)\"\n                :class=\"{ 'bg-light': selectedCategory === category.value }\"\n                class=\"pd-small radius-small cursor-pointer hover-bg-light transition-all\"\n              >\n                {{ category.label }}\n              </div>\n            </div>\n          </div>\n\n          <!-- Tags Filter -->\n          <Spoiler \n            class=\"o-hidden mn-b-medium\"\n            :status=\"true\"\n          >\n            <template #header=\"{ isOpen }\">\n              <div class=\"cursor-pointer w-100 flex-v-center flex-nowrap flex\">\n                <h4 class=\"w-100\">Tags</h4>\n                <div class=\"h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra\">\n                  <IconChevronBottom :class=\"{ 'rotate-180 mn-t-micro-negative': isOpen }\" fill=\"rgb(var(--black))\" class=\"i-regular\"/>\n                </div>\n              </div>\n            </template>\n\n            <template #content>\n              <div class=\"mn-t-small\">\n                <Field\n                  v-model=\"searchTag\"\n                  placeholder=\"Search tags...\"\n                  type=\"text\"\n                  class=\"w-100 bg-light pd-small radius-small mn-b-small\"\n                />\n                <Checkbox \n                  v-for=\"tag in filteredTags\"\n                  :key=\"tag\"\n                  v-model:checkbox=\"selectedTags\"\n                  :label=\"tag\"\n                  :value=\"tag\"\n                  mode=\"checkbox\"\n                  class=\"mn-b-micro\"\n                />\n              </div>\n            </template>\n          </Spoiler>\n\n          <!-- Date Range Filter -->\n          <Spoiler \n            class=\"o-hidden mn-b-medium\"\n            :status=\"true\"\n          >\n            <template #header=\"{ isOpen }\">\n              <div class=\"cursor-pointer w-100 flex-v-center flex-nowrap flex\">\n                <h4 class=\"w-100\">Date Range</h4>\n                <div class=\"h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra\">\n                  <IconChevronBottom :class=\"{ 'rotate-180 mn-t-micro-negative': isOpen }\" fill=\"rgb(var(--black))\" class=\"i-regular\"/>\n                </div>\n              </div>\n            </template>\n\n            <template #content>\n              <div class=\"mn-t-small\">\n                <div \n                  v-for=\"option in dateRangeOptions\"\n                  :key=\"option.value\"\n                  @click=\"selectDateRange(option.value)\"\n                  :class=\"{ 'bg-light': selectedDateRange === option.value }\"\n                  class=\"pd-small radius-small cursor-pointer hover-bg-light transition-all mn-b-micro\"\n                >\n                  {{ option.label }}\n                </div>\n                \n                <div \n                  @click=\"() => { tempSelectedDates = selectedDates; showDatePickerPopup = true; }\"\n                  :class=\"{ 'bg-light': selectedDateRange === 'custom' }\"\n                  class=\"pd-small radius-small cursor-pointer hover-bg-light transition-all mn-b-micro\"\n                >\n                  {{ selectedDates ? `${formatDate(selectedDates.start, { dayMonth: true, language: 'en' })} - ${formatDate(selectedDates.end, { dayMonth: true, language: 'en' })}` : 'Select custom dates'}} \n                </div>\n              </div>\n            </template>\n          </Spoiler>\n\n          <!-- Author Filter -->\n          <Spoiler \n            class=\"o-hidden mn-b-medium\"\n            :status=\"true\"\n          >\n            <template #header=\"{ isOpen }\">\n              <div class=\"cursor-pointer w-100 flex-v-center flex-nowrap flex\">\n                <h4 class=\"w-100\">Author</h4>\n                <div class=\"h-2r w-2r flex-child-auto aspect-1x1 flex-center flex bg-light radius-extra\">\n                  <IconChevronBottom :class=\"{ 'rotate-180 mn-t-micro-negative': isOpen }\" fill=\"rgb(var(--black))\" class=\"i-regular\"/>\n                </div>\n              </div>\n            </template>\n\n            <template #content>\n              <div class=\"mn-t-small\">\n                <Checkbox \n                  label=\"My Posts Only\"\n                  v-model:checkbox=\"showMyPostsOnly\"\n                  mode=\"checkbox\"\n                  class=\"mn-b-micro\"\n                />\n              </div>\n            </template>\n          </Spoiler>\n\n          <!-- Clear Filters Button -->\n          <button \n            @click=\"clearFilters\"\n            class=\"bg-main w-100 button mn-t-medium\"\n          >\n            Clear Filters\n          </button>\n        </div>\n      </div>\n\n      <div class=\"w-100 rows-1 pd-thin pos-relative o-hidden\">\n        <Filters\n          v-model:filters=\"availableFilters\"\n          v-model:selected=\"selectedFilters\"\n        />\n\n        <div class=\"mn-b-thin w-100 o-y-scroll scroll-hide scroll-snap-type-x-mandatory scroll-pd-regular\">\n          <div class=\"gap-thin flex-nowrap flex\">\n            <div\n              v-for=\"category in postCategories\"\n              :key=\"category.value\"\n              @click=\"selectCategory(category.value)\"\n              :class=\"{ 'bg-main t-white': selectedCategory === category.value }\"\n              class=\"flex-child-default bg-light flex t-nowrap pd-medium radius-medium cursor-pointer hover-bg-light transition-all\"\n            >\n              {{ category.label }}\n            </div>\n          </div>\n        </div>\n\n        <Feed\n          :search=\"true\"\n          v-model:filter=\"blog.state.filter\"\n          v-model:sort=\"blog.state.sort\"\n          :showLoadMore=\"false\"\n          :states=\"{\n            empty: {\n              title: 'No Blog Posts Found',\n              description: 'Currently, there are no posts available in this blog.'\n            }\n          }\"\n          :store=\"{\n            read: (options) => blog.read(options),\n            state: blog.state\n          }\"\n          :options=\"{\n            limit: 12,\n            status: 'published',\n            user: auth.state.user._id,\n            owner: route.params._id || null,\n            category: selectedCategory !== 'all' ? selectedCategory : null,\n            tags: selectedTags.length > 0 ? selectedTags : null,\n            author: showMyPostsOnly ? auth.state.user._id : null,\n            dateStart: selectedDates?.start,\n            dateEnd: selectedDates?.end,\n            search: route.query.search\n          }\"\n          v-slot=\"{ \n            items \n          }\"\n          class=\"cols-3 pos-relative w-100 rows-1 gap-thin\"\n        >\n          <CardBlogpost \n            v-for=\"item in items\" \n            :key=\"item._id\" \n            :blogpost=\"item\" \n            :user=\"auth.state.user._id\" \n            class=\"h-max-40r bg-light radius-medium cursor-pointer hover-scale-1 transition-all\"\n            @click=\"$router.push({ \n              name: route.params._id ? 'Organization_BlogPost' : 'BlogPost', \n              params: { \n                _id: route.params._id,\n                url: item.url \n              } \n            })\"\n          />\n        </Feed>\n\n        <button\n          v-if=\"hasAccess(route.params._id, 'posts', 'create', auth.state.accesses, auth.state.access.roles)\"\n          @click=\"$router.push({\n            name: route.params?._id ? 'Organization_PostAdd' : 'CreateBlogPost'\n          })\"\n          class=\"mn-t-medium bg-main button w-100\"\n        >\n          Create New Post\n        </button>\n      </div>\n    </div>\n  \n    <!-- Date Picker Popup -->\n    <Popup\n      :isPopupOpen=\"showDatePickerPopup\"\n      @close-popup=\"showDatePickerPopup = false\"\n      class=\"pd-medium bg-white radius-medium\"\n      style=\"min-width: 350px;\"\n    >\n      <h3 class=\"mn-b-medium\">Select Date Range</h3>\n      \n      <Calendar\n        v-model:date=\"tempSelectedDates\"\n        :allowRange=\"true\"\n        :disablePastDates=\"false\"\n        class=\"mn-b-medium\"\n      />\n      \n      <div class=\"flex gap-small\">\n        <button \n          @click=\"applyDateFilter\"\n          class=\"bg-main button flex-child-full\"\n        >\n          Apply\n        </button>\n        <button \n          @click=\"showDatePickerPopup = false\"\n          class=\"bg-light button flex-child-full\"\n        >\n          Cancel\n        </button>\n      </div>\n    </Popup>\n  </div>\n</template>\n\n<script setup=\"props\">\n  // Import libs\n  import { ref, computed, watch, onMounted, onUnmounted } from 'vue'\n  import { useRoute, useRouter } from 'vue-router'\n\n  // Import components\n  import Feed from '@martyrs/src/components/Feed/Feed.vue'\n  import Filters from '@martyrs/src/modules/globals/views/components/sections/Filters.vue'\n  import Spoiler from \"@martyrs/src/components/Spoiler/Spoiler.vue\"\n  import Field from \"@martyrs/src/components/Field/Field.vue\"\n  import Checkbox from \"@martyrs/src/components/Checkbox/Checkbox.vue\"\n  import Calendar from \"@martyrs/src/components/Calendar/Calendar.vue\"\n  import Popup from \"@martyrs/src/components/Popup/Popup.vue\"\n\n  import CardBlogpost from '@martyrs/src/modules/community/components/blocks/CardBlogpost.vue'\n\n  import IconPlus from '@martyrs/src/modules/icons/navigation/IconPlus.vue'\n  import IconChevronBottom from '@martyrs/src/modules/icons/navigation/IconChevronBottom.vue'\n\n  // Accessing router and store\n  import * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n  import * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\n  import * as blog from '@martyrs/src/modules/community/store/blogposts.js';\n  import * as organizations from '@martyrs/src/modules/organizations/store/organizations.js';\n  import { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';\n\n  const route = useRoute()\n  const router = useRouter()\n  const { hasAccess, formatDate } = useGlobalMixins()\n\n  // Props\n  const props = defineProps({\n    organization: {\n      type: Object,\n      default: null\n    }\n  })\n\n  // Categories\n  const postCategories = ref([\n    { label: 'All Posts', value: 'all' },\n    { label: 'News', value: 'news' },\n    { label: 'Updates', value: 'updates' },\n    { label: 'Events', value: 'events' },\n    { label: 'Announcements', value: 'announcements' },\n    { label: 'Stories', value: 'stories' }\n  ]);\n  const selectedCategory = ref('all');\n\n  // Tags\n  const searchTag = ref('');\n  const selectedTags = ref([]);\n  const availableTags = ref(['featured', 'important', 'trending', 'community', 'official']);\n  const filteredTags = computed(() => {\n    if (!searchTag.value) return availableTags.value;\n    return availableTags.value.filter(tag => \n      tag.toLowerCase().includes(searchTag.value.toLowerCase())\n    );\n  });\n\n  // Date Range\n  const dateRangeOptions = ref([\n    { label: 'All Time', value: 'all' },\n    { label: 'Today', value: 'today' },\n    { label: 'This Week', value: 'week' },\n    { label: 'This Month', value: 'month' },\n    { label: 'This Year', value: 'year' }\n  ]);\n  const selectedDateRange = ref('all');\n  const showDatePickerPopup = ref(false);\n  const selectedDates = ref(null);\n  const tempSelectedDates = ref(null);\n\n  // Author\n  const showMyPostsOnly = ref(false);\n\n  const availableFilters = ref([\n    {\n      title: 'Category',\n      value: 'category',\n      type: 'radio',\n      options: postCategories.value\n    },\n    {\n      title: 'Status',\n      value: 'status',\n      type: 'radio',\n      options: [\n        { label: 'Published', value: 'published' },\n        { label: 'Draft', value: 'draft' },\n        { label: 'Archived', value: 'archived' }\n      ]\n    }\n  ])\n\n  const selectedFilters = ref({\n    category: 'all',\n    status: 'published'\n  })\n\n  const selectCategory = (category) => {\n    selectedCategory.value = category;\n    selectedFilters.value.category = category;\n  };\n\n  const selectDateRange = (range) => {\n    selectedDateRange.value = range;\n    const today = new Date();\n    \n    switch(range) {\n      case 'all':\n        selectedDates.value = null;\n        break;\n      case 'today':\n        selectedDates.value = {\n          start: today,\n          end: today\n        };\n        break;\n      case 'week':\n        const weekStart = new Date(today);\n        weekStart.setDate(today.getDate() - today.getDay());\n        selectedDates.value = {\n          start: weekStart,\n          end: today\n        };\n        break;\n      case 'month':\n        const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);\n        selectedDates.value = {\n          start: monthStart,\n          end: today\n        };\n        break;\n      case 'year':\n        const yearStart = new Date(today.getFullYear(), 0, 1);\n        selectedDates.value = {\n          start: yearStart,\n          end: today\n        };\n        break;\n    }\n  };\n\n  const applyDateFilter = () => {\n    selectedDates.value = tempSelectedDates.value;\n    selectedDateRange.value = 'custom';\n    showDatePickerPopup.value = false;\n  };\n\n  const clearFilters = () => {\n    selectedCategory.value = 'all';\n    selectedTags.value = [];\n    selectedDateRange.value = 'all';\n    selectedDates.value = null;\n    showMyPostsOnly.value = false;\n    searchTag.value = '';\n    selectedFilters.value = {\n      category: 'all',\n      status: 'published'\n    };\n  };\n\n  globals.state.navigation_bar.actions = [{\n    component: IconPlus,\n    props: {\n      fill: \"rgb(var(--main))\" \n    },\n    condition: () => auth.state.user && auth.state.user._id,\n    action: () => route.params._id ? router.push({ name: 'Organization_PostAdd', params: { _id: route.params._id} }) : router.push({ name: 'CreateBlogPost' })\n  }]\n\n  onMounted(async () => {\n    if (route.params._id) {\n      await organizations.actions.read({ _id: route.params._id });\n    }\n  })\n\n  onUnmounted(() => {\n    globals.state.navigation_bar.actions = [];\n  });\n</script>\n\n<style lang=\"scss\">\n</style>"],"names":["useRoute","useRouter","useGlobalMixins","ref","computed","globals.state","IconPlus","auth.state","onMounted","organizations.actions","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6RE,UAAM,QAAQA,UAAAA,SAAQ;AACtB,UAAM,SAASC,UAAAA,UAAS;AACxB,UAAM,EAAE,WAAW,WAAU,IAAKC,OAAAA,gBAAe;AAWjD,UAAM,iBAAiBC,IAAAA,IAAI;AAAA,MACzB,EAAE,OAAO,aAAa,OAAO,MAAK;AAAA,MAClC,EAAE,OAAO,QAAQ,OAAO,OAAM;AAAA,MAC9B,EAAE,OAAO,WAAW,OAAO,UAAS;AAAA,MACpC,EAAE,OAAO,UAAU,OAAO,SAAQ;AAAA,MAClC,EAAE,OAAO,iBAAiB,OAAO,gBAAe;AAAA,MAChD,EAAE,OAAO,WAAW,OAAO,UAAS;AAAA,IACxC,CAAG;AACD,UAAM,mBAAmBA,IAAAA,IAAI,KAAK;AAGlC,UAAM,YAAYA,IAAAA,IAAI,EAAE;AACxB,UAAM,eAAeA,IAAAA,IAAI,EAAE;AAC3B,UAAM,gBAAgBA,IAAAA,IAAI,CAAC,YAAY,aAAa,YAAY,aAAa,UAAU,CAAC;AACxF,UAAM,eAAeC,IAAAA,SAAS,MAAM;AAClC,UAAI,CAAC,UAAU,MAAO,QAAO,cAAc;AAC3C,aAAO,cAAc,MAAM;AAAA,QAAO,SAChC,IAAI,YAAW,EAAG,SAAS,UAAU,MAAM,YAAW,CAAE;AAAA,MAC9D;AAAA,IACE,CAAC;AAGD,UAAM,mBAAmBD,IAAAA,IAAI;AAAA,MAC3B,EAAE,OAAO,YAAY,OAAO,MAAK;AAAA,MACjC,EAAE,OAAO,SAAS,OAAO,QAAO;AAAA,MAChC,EAAE,OAAO,aAAa,OAAO,OAAM;AAAA,MACnC,EAAE,OAAO,cAAc,OAAO,QAAO;AAAA,MACrC,EAAE,OAAO,aAAa,OAAO,OAAM;AAAA,IACvC,CAAG;AACD,UAAM,oBAAoBA,IAAAA,IAAI,KAAK;AACnC,UAAM,sBAAsBA,IAAAA,IAAI,KAAK;AACrC,UAAM,gBAAgBA,IAAAA,IAAI,IAAI;AAC9B,UAAM,oBAAoBA,IAAAA,IAAI,IAAI;AAGlC,UAAM,kBAAkBA,IAAAA,IAAI,KAAK;AAEjC,UAAM,mBAAmBA,IAAAA,IAAI;AAAA,MAC3B;AAAA,QACE,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS,eAAe;AAAA,MAC9B;AAAA,MACI;AAAA,QACE,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,UACP,EAAE,OAAO,aAAa,OAAO,YAAW;AAAA,UACxC,EAAE,OAAO,SAAS,OAAO,QAAO;AAAA,UAChC,EAAE,OAAO,YAAY,OAAO,WAAU;AAAA,QAC9C;AAAA,MACA;AAAA,IACA,CAAG;AAED,UAAM,kBAAkBA,IAAAA,IAAI;AAAA,MAC1B,UAAU;AAAA,MACV,QAAQ;AAAA,IACZ,CAAG;AAED,UAAM,iBAAiB,CAAC,aAAa;AACnC,uBAAiB,QAAQ;AACzB,sBAAgB,MAAM,WAAW;AAAA,IACnC;AAEA,UAAM,kBAAkB,CAAC,UAAU;AACjC,wBAAkB,QAAQ;AAC1B,YAAM,QAAQ,oBAAI,KAAI;AAEtB,cAAO,OAAK;AAAA,QACV,KAAK;AACH,wBAAc,QAAQ;AACtB;AAAA,QACF,KAAK;AACH,wBAAc,QAAQ;AAAA,YACpB,OAAO;AAAA,YACP,KAAK;AAAA,UACf;AACQ;AAAA,QACF,KAAK;AACH,gBAAM,YAAY,IAAI,KAAK,KAAK;AAChC,oBAAU,QAAQ,MAAM,QAAO,IAAK,MAAM,QAAQ;AAClD,wBAAc,QAAQ;AAAA,YACpB,OAAO;AAAA,YACP,KAAK;AAAA,UACf;AACQ;AAAA,QACF,KAAK;AACH,gBAAM,aAAa,IAAI,KAAK,MAAM,YAAW,GAAI,MAAM,SAAQ,GAAI,CAAC;AACpE,wBAAc,QAAQ;AAAA,YACpB,OAAO;AAAA,YACP,KAAK;AAAA,UACf;AACQ;AAAA,QACF,KAAK;AACH,gBAAM,YAAY,IAAI,KAAK,MAAM,YAAW,GAAI,GAAG,CAAC;AACpD,wBAAc,QAAQ;AAAA,YACpB,OAAO;AAAA,YACP,KAAK;AAAA,UACf;AACQ;AAAA,MACR;AAAA,IACE;AAEA,UAAM,kBAAkB,MAAM;AAC5B,oBAAc,QAAQ,kBAAkB;AACxC,wBAAkB,QAAQ;AAC1B,0BAAoB,QAAQ;AAAA,IAC9B;AAEA,UAAM,eAAe,MAAM;AACzB,uBAAiB,QAAQ;AACzB,mBAAa,QAAQ,CAAA;AACrB,wBAAkB,QAAQ;AAC1B,oBAAc,QAAQ;AACtB,sBAAgB,QAAQ;AACxB,gBAAU,QAAQ;AAClB,sBAAgB,QAAQ;AAAA,QACtB,UAAU;AAAA,QACV,QAAQ;AAAA,MACd;AAAA,IACE;AAEAE,kBAAc,eAAe,UAAU,CAAC;AAAA,MACtC,WAAWC,SAAAA;AAAAA,MACX,OAAO;AAAA,QACL,MAAM;AAAA,MACZ;AAAA,MACI,WAAW,MAAMC,KAAAA,MAAW,QAAQA,KAAAA,MAAW,KAAK;AAAA,MACpD,QAAQ,MAAM,MAAM,OAAO,MAAM,OAAO,KAAK,EAAE,MAAM,wBAAwB,QAAQ,EAAE,KAAK,MAAM,OAAO,IAAG,EAAC,CAAE,IAAI,OAAO,KAAK,EAAE,MAAM,iBAAgB,CAAE;AAAA,IAC7J,CAAG;AAEDC,QAAAA,UAAU,YAAY;AACpB,UAAI,MAAM,OAAO,KAAK;AACpB,cAAMC,cAAAA,QAAsB,KAAK,EAAE,KAAK,MAAM,OAAO,KAAK;AAAA,MAC5D;AAAA,IACF,CAAC;AAEDC,QAAAA,YAAY,MAAM;AAChBL,oBAAc,eAAe,UAAU,CAAA;AAAA,IACzC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}