grantthomas-nuxt 1.0.1

package/dist/runtime/components/CrudPaginatedLoader.vue

@@ -0,0 +1,415 @@
+<script setup async>
+import { useCrudApi } from "../composables/useCrudApi";
+import { useCrudConverters } from "../composables/useCrudConverters";
+import { usePreviousRoute } from "../composables/usePreviousRoute";
+import { useRoute, useRouter } from "#app";
+import CrudFilterList from "./CrudFilterList.vue";
+import { computed, ref, watch, onMounted, onBeforeUnmount } from "vue";
+import { useDebounceFn } from "@vueuse/core";
+import { useListenerService } from "../composables/useListenerService";
+import CrudFormDialog from "./CrudFormDialog.vue";
+import CrudErrorDisplay from "./CrudErrorDisplay.vue";
+const { parseQuery, stringifyQuery, cloneDeep } = useCrudConverters();
+const props = defineProps({
+  fullScreenDialog: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  loaderKey: {
+    type: String,
+    required: false
+  },
+  initialItem: {
+    type: Object,
+    required: false
+  },
+  path: {
+    type: String,
+    required: true
+  },
+  allowCreate: {
+    type: Boolean,
+    default: false
+  },
+  hideFilters: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    required: false
+  },
+  transformItem: {
+    type: Function,
+    required: false
+  },
+  transformItems: {
+    type: Function,
+    required: false
+  },
+  beforeSave: {
+    type: Function,
+    required: false
+  },
+  beforeCreate: {
+    type: Function,
+    required: false
+  },
+  beforeUpdate: {
+    type: Function,
+    required: false
+  },
+  beforeDelete: {
+    type: Function,
+    required: false
+  },
+  perPage: {
+    type: Number,
+    required: false,
+    default: 10
+  },
+  updateTitle: {
+    type: String,
+    required: false,
+    default() {
+      return "Update item";
+    }
+  },
+  deleteTitle: {
+    type: String,
+    required: false,
+    default() {
+      return "Delete item";
+    }
+  },
+  createTitle: {
+    type: String,
+    required: false,
+    default() {
+      return "Create item";
+    }
+  },
+  customFilters: {
+    type: Object,
+    required: false,
+    default: () => {
+    }
+  },
+  await: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  listeners: {
+    type: Array,
+    required: false,
+    default: () => []
+  },
+  noResultsText: {
+    type: String,
+    required: false,
+    default: "No results"
+  },
+  contentClasses: {
+    type: String,
+    required: false,
+    default: ""
+  }
+});
+const {
+  getItems,
+  getItem,
+  updateItem,
+  deleteItem,
+  createItem,
+  filters,
+  item,
+  originalItem,
+  items,
+  listErrors,
+  listPending,
+  formErrors,
+  formPending,
+  itemErrors,
+  itemPending,
+  currentPage,
+  perPage,
+  totalPages,
+  totalItems,
+  exportErrors,
+  exportPending,
+  exportItems,
+  exportUrl,
+  hasExportErrors,
+  hasListErrors
+} = useCrudApi(props.path, false, props.transformItem, props.transformItems);
+perPage.value = props.perPage;
+const route = useRoute();
+const router = useRouter();
+const previousRoute = usePreviousRoute();
+const action = computed(() => route.query[(props.loaderKey ?? "") + "action"]);
+const actionId = computed(() => route.query[(props.loaderKey ?? "") + "actionId"]);
+const dialogOpen = computed({
+  get: () => !!(action.value === "create" || action.value === "update" && actionId.value || action.value === "delete" && actionId.value),
+  set: (value) => {
+    if (!value) {
+      const hasBackState = router.options.history.state.back;
+      const previousRouteName = previousRoute.value?.name;
+      const currentRouteName = route.name;
+      console.log("previousRouteName", previousRouteName);
+      console.log("currentRouteName", currentRouteName);
+      if (hasBackState && previousRouteName === currentRouteName) {
+        router.back();
+      } else {
+        const currentQuery = { ...route.query };
+        if (props.loaderKey) {
+          delete currentQuery[`${props.loaderKey}action`];
+          delete currentQuery[`${props.loaderKey}actionId`];
+        } else {
+          delete currentQuery.action;
+          delete currentQuery.actionId;
+        }
+        const finalRoute = {
+          path: route.path,
+          query: currentQuery
+        };
+        router.replace(finalRoute);
+      }
+    }
+  }
+});
+const page = computed(() => props.loaderKey ? parseQuery(route.query[props.loaderKey])?.page ?? 1 : route.query.page ?? 1);
+const filterValues = props.loaderKey ? ref({ ...props.customFilters, ...parseQuery(route.query[props.loaderKey]) }) : ref({ ...props.customFilters, ...route.query });
+const onQueryChange = (page2) => {
+  console.error("QUERY CHANGED");
+  const newQuery = {};
+  const existingQuery = parseQuery(route.query);
+  for (const key in filterValues.value) {
+    if (filterValues.value[key] !== null && filterValues.value[key] !== "") {
+      newQuery[key] = filterValues.value[key];
+    }
+  }
+  newQuery.page = page2;
+  let finalQuery = {
+    ...existingQuery
+  };
+  if (props.loaderKey) {
+    finalQuery[props.loaderKey] = stringifyQuery(newQuery);
+  } else {
+    finalQuery = newQuery;
+  }
+  if (props.loaderKey) {
+    delete finalQuery[`${props.loaderKey}action`];
+    delete finalQuery[`${props.loaderKey}actionId`];
+  } else {
+    delete finalQuery.action;
+    delete finalQuery.actionId;
+  }
+  console.error("Setting query", finalQuery);
+  router.replace({ path: route.path, query: finalQuery, force: true });
+};
+watch(currentPage, (newVal, oldValue) => {
+  onQueryChange(currentPage.value);
+});
+watch(filterValues, (newVal, oldValue) => {
+  console.error("FILTERS CHANGED");
+  onQueryChange(1);
+}, { deep: true });
+watch(() => page, () => {
+  console.error("ROUTE CHANGED");
+  debouncedGet();
+}, { deep: true });
+watch(() => filterValues, () => {
+  console.error("ROUTE CHANGED");
+  debouncedGet();
+}, { deep: true });
+const debouncedGet = useDebounceFn(() => {
+  console.error("DEBOUNCED GET");
+  getItems(Number.parseInt(page.value) ?? null, null, filterValues.value);
+}, 200);
+const updateForm = async (id) => {
+  const newQuery = { query: { ...route.query } };
+  if (props.loaderKey) {
+    newQuery.query[(props.loaderKey ?? "") + "action"] = "update";
+    newQuery.query[(props.loaderKey ?? "") + "actionId"] = id;
+  } else {
+    newQuery.query.action = "update";
+    newQuery.query.actionId = id;
+  }
+  await router.push(newQuery);
+};
+const deleteForm = async (id) => {
+  const newQuery = { query: { ...route.query } };
+  if (props.loaderKey) {
+    newQuery.query[(props.loaderKey ?? "") + "action"] = "delete";
+    newQuery.query[(props.loaderKey ?? "") + "actionId"] = id;
+  } else {
+    newQuery.query.action = "delete";
+    newQuery.query.actionId = id;
+  }
+  await router.push(newQuery);
+};
+const createForm = () => {
+  item.value = props.initialItem ? cloneDeep(props.initialItem) : {};
+  const newQuery = { query: { ...route.query } };
+  if (props.loaderKey) {
+    newQuery.query[(props.loaderKey ?? "") + "action"] = "create";
+  } else {
+    newQuery.query.action = "create";
+  }
+  router.push(newQuery);
+};
+const saveAction = async () => {
+  formPending.value = true;
+  let itemToSave = JSON.parse(JSON.stringify(item.value));
+  if (props.beforeSave != null) {
+    itemToSave = await props.beforeSave(itemToSave);
+  }
+  if (action.value === "create") {
+    if (props.beforeCreate != null) {
+      itemToSave = await props.beforeCreate(itemToSave);
+    }
+    await createItem(itemToSave);
+  } else if (action.value === "update") {
+    if (props.beforeUpdate != null) {
+      itemToSave = await props.beforeUpdate(itemToSave);
+    }
+    await updateItem(itemToSave.id, itemToSave);
+  } else if (action.value === "delete") {
+    if (props.beforeDelete != null) {
+      itemToSave = await props.beforeDelete(itemToSave);
+    }
+    await deleteItem(itemToSave.id);
+  }
+  if (formErrors.value == null || Object.keys(formErrors.value).length === 0) {
+    const savedPath = props.path;
+    const savedAction = action.value;
+    const savedItem = item.value;
+    dialogOpen.value = false;
+    await getItems(Number.parseInt(page.value) ?? null, null, filterValues.value);
+    notify(savedPath + ":" + savedAction, savedItem);
+  }
+};
+if (props.await) {
+  await getItems(page.value ?? null, null, filterValues.value);
+} else {
+  getItems(page.value ?? null, null, filterValues.value);
+}
+watch(action, (newVal, oldValue) => {
+  try {
+    if (action.value === "update" && actionId.value) {
+      getItem(actionId.value);
+    } else if (action.value === "create") {
+      item.value = props.initialItem ? cloneDeep(props.initialItem) : {};
+    } else if (action.value === "delete" && actionId.value) {
+      getItem(actionId.value);
+    }
+  } catch (error) {
+    console.error("Error in actionId watcher:", error);
+  }
+}, { immediate: true });
+const { addListener, removeLocalListenersWithEvent, notify } = useListenerService();
+onMounted(() => {
+  props.listeners.forEach((listener) => {
+    addListener(listener, (data) => {
+      getItems(Number.parseInt(page.value) ?? null, null, filterValues.value);
+    });
+  });
+});
+onBeforeUnmount(() => {
+  props.listeners.forEach((listener) => {
+    removeLocalListenersWithEvent(listener);
+  });
+});
+const exportAction = async () => {
+  await exportItems(filterValues.value);
+  if (!hasExportErrors.value) {
+    window.open(exportUrl.value, "_blank");
+  }
+};
+</script>
+
+<template>
+  <div>
+    <slot
+      name="before"
+      :items="items"
+      :pending="listPending"
+      :create-action="createForm"
+      :update-action="updateForm"
+      :delete-action="deleteForm"
+      :form-pending="formPending"
+      :export-action="exportAction"
+      :export-pending="exportPending"
+      :export-errors="exportErrors"
+    >
+    </slot>
+    <div :class="contentClasses">
+      <v-progress-linear :active="listPending" indeterminate color="primary"></v-progress-linear>
+      <v-row>
+        <v-col v-if="!hideFilters && filters.length > 0" cols="12" md="3">
+          <div>
+            <slot name="filters" :filters="filters">
+              <crud-filter-list v-model="filterValues" :filters="filters"></crud-filter-list>
+            </slot>
+          </div>
+        </v-col>
+        <v-col cols="12" :md="hideFilters || filters.length === 0 ? '12' : '9'">
+          <div class="">
+            <slot v-if="!listPending && totalItems === 0 && !hasListErrors" name="empty" :create-action="createForm">
+              <v-alert icon="mdi-playlist-remove" type="info" class="pa-5">
+                {{ noResultsText }}
+              </v-alert>
+            </slot>
+            <slot v-if="hasListErrors" name="error" :errors="listErrors">
+              <crud-error-display :errors="listErrors"></crud-error-display>
+            </slot>
+            <slot
+              v-if="totalItems > 0"
+              :items="items"
+              :pending="listPending"
+              :update-action="updateForm"
+              :delete-action="deleteForm"
+              :form-pending="formPending"
+            >
+            </slot>
+          </div>
+          <div v-if="totalItems > 0 && totalPages > 1" class="pa-3">
+            <span class="d-none d-md-block pa-3">Page {{ currentPage }} of {{ totalPages }} pages with {{ totalItems }} items</span>
+            <v-pagination
+              v-model="currentPage"
+              :disabled="listPending"
+              :length="totalPages"
+              @input="getItems()"></v-pagination>
+          </div>
+        </v-col>
+      </v-row>
+    </div>
+
+    <crud-form-dialog
+      v-model:dialog="dialogOpen"
+      v-model="item"
+      :original-item="originalItem"
+      :action="action"
+      :form-errors="formErrors"
+      :item-errors="itemErrors"
+      :form-pending="formPending"
+      :item-pending="itemPending"
+      :create-title="createTitle"
+      :update-title="updateTitle"
+      :delete-title="deleteTitle"
+      :save-action="saveAction"
+      :full-screen="fullScreenDialog"
+    >
+      <slot
+        name="form" :action="action"
+        :item="item"
+        :original-item="originalItem"
+        :errors="formErrors">
+
+      </slot>
+    </crud-form-dialog>
+
+  </div>
+</template>

package/dist/runtime/components/CrudPaginatedLoader.vue.d.ts

@@ -0,0 +1,70 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    path: string;
+    customFilters: Record<string, any>;
+    perPage: number;
+    await: boolean;
+    listeners: unknown[];
+    noResultsText: string;
+    createTitle: string;
+    updateTitle: string;
+    deleteTitle: string;
+    allowCreate: boolean;
+    hideFilters: boolean;
+    fullScreenDialog: boolean;
+    contentClasses: string;
+    title?: string | undefined;
+    loaderKey?: string | undefined;
+    initialItem?: Record<string, any> | undefined;
+    transformItem?: Function | undefined;
+    transformItems?: Function | undefined;
+    beforeSave?: Function | undefined;
+    beforeCreate?: Function | undefined;
+    beforeUpdate?: Function | undefined;
+    beforeDelete?: Function | undefined;
+    $props: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    before?: ((props: {
+        items: any;
+        pending: any;
+        createAction: any;
+        updateAction: any;
+        deleteAction: any;
+        formPending: any;
+        exportAction: any;
+        exportPending: any;
+        exportErrors: any;
+    }) => any) | undefined;
+} & {
+    filters?: ((props: {
+        filters: any;
+    }) => any) | undefined;
+} & {
+    empty?: ((props: {
+        createAction: any;
+    }) => any) | undefined;
+} & {
+    error?: ((props: {
+        errors: any;
+    }) => any) | undefined;
+} & {
+    default?: ((props: {
+        items: any;
+        pending: any;
+        updateAction: any;
+        deleteAction: any;
+        formPending: any;
+    }) => any) | undefined;
+} & {
+    form?: ((props: {
+        action: any;
+        item: any;
+        originalItem: any;
+        errors: any;
+    }) => any) | undefined;
+};

package/dist/runtime/components/CrudUploadField.d.vue.ts

@@ -0,0 +1,23 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    path: string;
+    customFilters: Record<string, any>;
+    multiple: boolean;
+    disabled: boolean;
+    mimeKey: string;
+    fileNameKey: string;
+    replaceable: boolean;
+    isPublic: boolean;
+    additionalPostData: Record<string, any>;
+    title?: any;
+    $props: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    additionalActions?: ((props: {
+        item: any;
+    }) => any) | undefined;
+};