adminforth 1.3.54-next.8 → 1.3.55-next.0

package/spa/src/views/EditView.vue

@@ -1,170 +0,0 @@
-<template>
-  <div class="relative">
-    <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.beforeBreadcrumbs || []"
-      :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :record="editableRecord"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-    />
-
-    <BreadcrumbsWithButtons>
-      <!-- save and cancle -->
-      <button @click="$router.back()"
-        class="flex items-center py-1 px-3 me-2 text-sm font-medium text-gray-900  rounded-default focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
-      >
-        Cancel
-      </button>
-
-      <button
-        @click="saveRecord"
-        class="flex items-center py-1 px-3 text-sm font-medium  rounded-default text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
-        :disabled="saving || (validating && !isValid)"
-      >
-        <IconFloppyDiskSolid class="w-4 h-4" />
-        Save
-      </button>
-
-      <ThreeDotsMenu 
-        :threeDotsDropdownItems="coreStore.resourceOptions?.pageInjections?.edit?.threeDotsDropdownItems"
-      ></ThreeDotsMenu>
-
-    </BreadcrumbsWithButtons>
-
-    <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.afterBreadcrumbs || []"
-      :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :record="coreStore.record"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-    />
-
-    <SingleSkeletLoader v-if="loading"></SingleSkeletLoader>
-
-    <ResourceForm 
-      v-else
-      :record="editableRecord"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-      @update:record="onUpdateRecord"
-      @update:isValid="isValid = $event"
-      :validating="validating"
-      :source="'edit'"
-    >
-    </ResourceForm>
-
-    <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.bottom || []"
-      :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :record="coreStore.record"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-    />
-
-  </div>
-</template>
-
-
-<script setup>
-
-import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
-import ResourceForm from '@/components/ResourceForm.vue';
-import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
-import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown } from '@/utils';
-import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
-import { computed, onMounted, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { showErrorTost } from '@/composables/useFrontendApi';
-import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
-
-
-const coreStore = useCoreStore();
-
-const isValid = ref(false);
-const validating = ref(false);
-
-const route = useRoute();
-const router = useRouter();
-
-const loading = ref(false);
-
-const saving = ref(false);
-
-const record = ref({});
-
-async function onUpdateRecord(newRecord) {
-  record.value = newRecord;
-}
-
-const editableRecord = computed(() => {
-  const newRecord = { ...coreStore.record };
-  if (!coreStore.resource) {
-    return {};
-  }
-  coreStore.resource.columns.forEach(column => {
-    if (column.foreignResource) {
-      newRecord[column.name] = newRecord[column.name]?.pk
-    }
-  });
-  return newRecord;
-})
-
-onMounted(async () => {
-  loading.value = true;
-
-  await coreStore.fetchResourceFull({
-    resourceId: route.params.resourceId
-  });
-  initThreeDotsDropdown();
-
-  await coreStore.fetchRecord({
-    resourceId: route.params.resourceId, 
-    primaryKey: route.params.primaryKey,
-  });
-  checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'edit');
-  loading.value = false;
-});
-
-async function saveRecord() {
-  if (!isValid.value) {
-    validating.value = true;
-    return;
-  } else {
-    validating.value = false;
-  }
-
-  saving.value = true;
-  const updates = {};
-  for (const key in record.value) {
-    if (record.value[key] !== coreStore.record[key]) {
-      updates[key] = record.value[key];
-    }
-  }
-
-  const resp = await callAdminForthApi({
-    method: 'POST',
-    path: `/update_record`,
-    body: {
-      resourceId: route.params.resourceId,
-      recordId: route.params.primaryKey,
-      record: updates,
-    },
-  });
-  if (resp.error) {
-    showErrorTost(resp.error);
-  } else {
-    window.adminforth.alert({
-      message: 'Record updated successfully',
-      variant: 'success',
-      timeout: 400000
-    });
-  }
-  saving.value = false;
-  router.push({ name: 'resource-show', params: { resourceId: route.params.resourceId, primaryKey: coreStore.record[coreStore.primaryKey] } });
-}
-
-</script>

package/spa/src/views/ListView.vue

@@ -1,352 +0,0 @@
-<template>
-  <div class="relative">
-    <Teleport to="body">
-      <Filters
-        :columns="coreStore.resource?.columns"
-        :columnsMinMax="columnsMinMax" :show="filtersShow"
-        @hide="filtersShow = false"
-      />
-    </Teleport>
-
-    <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.beforeBreadcrumbs || []"
-      :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-    />
-
-    <BreadcrumbsWithButtons>
-      <button
-        @click="()=>{checkboxes = []}"
-        v-if="checkboxes.length"
-        data-tooltip-target="tooltip-remove-all"
-        class="flex gap-1  items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-darkListTable dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
-      >
-        <IconBanOutline class="w-5 h-5 "/>
-
-        <div id="tooltip-remove-all" role="tooltip"
-             class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-          Remove selection
-          <div class="tooltip-arrow" data-popper-arrow></div>
-        </div>
-      </button>
-
-      <button
-        v-if="checkboxes.length" 
-        v-for="(action,i) in coreStore.resource?.options?.bulkActions" 
-        :key="action.id"
-        @click="startBulkAction(action.id)"
-        class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
-        :class="{'bg-red-100 text-red-800 border-red-400 dark:bg-red-700 dark:text-red-400 dark:border-red-400':action.state==='danger', 'bg-green-100 text-green-800 border-green-400 dark:bg-green-700 dark:text-green-400 dark:border-green-400':action.state==='success',
-        'bg-lightPrimaryOpacity text-lightPrimary border-blue-400 dark:bg-blue-700 dark:text-blue-400 dark:border-blue-400':action.state==='active',
-        }"
-      >
-        <component
-          v-if="action.icon"
-          :is="getIcon(action.icon)"
-          class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"></component>
-
-        {{ `${action.label} (${checkboxes.length})` }}
-      </button>
-
-      <RouterLink v-if="coreStore.resource?.options?.allowedActions?.create"
-        :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
-        class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
-      >
-        <IconPlusOutline class="w-4 h-4 me-2"/>
-        Create
-      </RouterLink>
-
-      <button
-        class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
-        @click="()=>{filtersShow = !filtersShow}"
-        v-if="coreStore.resource?.options?.allowedActions?.filter"
-      >
-        <IconFilterOutline class="w-4 h-4 me-2"/>
-        Filter
-        <span
-          class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
-          v-if="filtersStore.filters.length">
-            {{ filtersStore.filters.length }}
-        </span>
-      </button>
-
-      <ThreeDotsMenu 
-        :threeDotsDropdownItems="coreStore.resourceOptions?.pageInjections?.list?.threeDotsDropdownItems"
-      ></ThreeDotsMenu>
-    </BreadcrumbsWithButtons>
-
-    <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.afterBreadcrumbs || []"
-      :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-    />
-
-    <ResourceListTable
-      :resource="coreStore.resource"
-      :rows="rows"
-      :page="page"
-      @update:page="page = $event"
-      @update:sort="sort = $event"
-      @update:checkboxes="checkboxes = $event"
-      @update:records="getList"
-      :sort="sort"
-      :pageSize="pageSize"
-      :totalRows="totalRows"
-      :checkboxes="checkboxes"
-    />
-
-    <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.bottom || []"
-      :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-    />
-
-  </div>
-</template>
-
-<script setup>
-import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
-import ResourceListTable from '@/components/ResourceListTable.vue';
-import { useCoreStore } from '@/stores/core';
-import { useFiltersStore } from '@/stores/filters';
-import { callAdminForthApi, currentQuery, getIcon, setQuery } from '@/utils';
-import { computed, onMounted, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import { showErrorTost } from '@/composables/useFrontendApi'
-import { getCustomComponent, initThreeDotsDropdown } from '@/utils';
-import { initFlowbite } from 'flowbite';
-import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
-
-
-import {
-  IconBanOutline,
-  IconFilterOutline,
-  IconPlusOutline
-} from '@iconify-prerendered/vue-flowbite';
-
-import Filters from '@/components/Filters.vue';
-
-const filtersShow = ref(false);
-
-const coreStore = useCoreStore();
-const filtersStore = useFiltersStore();
-
-const route = useRoute();
-
-const page = ref(1);
-const columnsMinMax = ref({});
-const sort = ref([]);
-
-watch(() => sort, async (to, from) => {
-  // in store sort might be needed for plugins
-  filtersStore.setSort(sort.value);
-}, {deep: true});
-
-const rows = ref(null);
-const totalRows = ref(0);
-const checkboxes = ref([]);
-
-const DEFAULT_PAGE_SIZE = 10;
-
-
-const pageSize = computed(() => coreStore.resource?.options?.listPageSize || DEFAULT_PAGE_SIZE);
-
-
-async function getList() {
-  rows.value = null;
-  const data = await callAdminForthApi({
-    path: '/get_resource_data',
-    method: 'POST',
-    body: {
-      source: 'list',
-      resourceId: route.params.resourceId,
-      limit: pageSize.value,
-      offset: ((page.value || 1) - 1) * pageSize.value,
-      filters: filtersStore.filters,
-      sort: sort.value,
-    }
-  });
-  if (data.error) {
-    showErrorTost(data.error);
-    rows.value = [];
-    totalRows.value = 0;
-    return;
-  }
-  rows.value = data.data?.map(row => {
-    row._primaryKeyValue = row[coreStore.resource.columns.find(c => c.primaryKey).name];
-    return row;
-  });
-  totalRows.value = data.total;
-  await new Promise(resolve => setTimeout(resolve, 0));
-  initFlowbite(); // for tooltips in table
-
-}
-
-async function startBulkAction(actionId) {
-  const action = coreStore.resource.options.bulkActions.find(a => a.id === actionId);
-  if (action.confirm) {
-    const confirmed = await window.adminforth.confirm({
-      message: action.confirm,
-    });
-    if (!confirmed) {
-      return;
-    }
-  }
-
-  const data = await callAdminForthApi({
-    path: '/start_bulk_action',
-    method: 'POST',
-    body: {
-      resourceId: route.params.resourceId,
-      actionId: actionId,
-      recordIds: checkboxes.value
-
-    }
-  });
-  if (data?.ok) {
-    checkboxes.value = [];
-    await getList();
-
-    if (data.successMessage) {
-      window.adminforth.alert({
-        message: data.successMessage,
-        variant: 'success'
-      });
-    }
-
-  }
-  if (data?.error) {
-    showErrorTost(data.error);
-  }
-}
-
-
-class SortQuerySerializer {
-    static serialize(sort) {
-        return sort.map(s => `${s.field}__${s.direction}`).join(',');
-    }
-    static deserialize(str) {
-        return str.split(',').map(s => {
-            const [field, direction] = s.split('__');
-            return { field, direction };
-        });
-    }
-}
-
-
-async function init() {
-  
-  await coreStore.fetchResourceFull({
-    resourceId: route.params.resourceId
-  });
-
-  initFlowbite();
-
-  // !!! clear filters should be in same tick with sort assignment so that watch can catch it as one change
-
-  // try to init filters from query params
-  const filters = Object.keys(route.query).filter(k => k.startsWith('filter__')).map(k => {
-    const [_, field, operator] = k.split('__');
-    return {
-      field,
-      operator,
-      value: JSON.parse(decodeURIComponent(route.query[k]))
-    }
-  });
-  if (filters.length) {
-    filtersStore.setFilters(filters);
-  } else {
-    filtersStore.clearFilters();
-  }
-
-  if (route.query.sort) {
-    sort.value = SortQuerySerializer.deserialize(route.query.sort);
-  } else if (coreStore.resource.options?.defaultSort) {
-    sort.value = [{
-        field: coreStore.resource.options.defaultSort.columnName,
-        direction: coreStore.resource.options.defaultSort.direction
-    }];
-  } else {
-    sort.value = [];
-  }
-  // page init should be also in same tick 
-  if (route.query.page) {
-    page.value = parseInt(route.query.page);
-  }
-
-  // await getList(); - Not needed here, watch will trigger it
-  columnsMinMax.value = await callAdminForthApi({
-    path: '/get_min_max_for_columns',
-    method: 'POST',
-    body: {
-      resourceId: route.params.resourceId
-    }
-  });
-}
-
-watch([page, sort, () => filtersStore.filters], async () => {
-  console.log('🔄️ page/sort/filter change fired, page:', page.value);
-
-  await getList();
-}, { deep: true });
-
-window.adminforth.list.refresh = async () => {
-  await getList();
-}
-
-let initInProcess = false;
-
-watch(() => filtersStore.filters, async (to, from) => {
-  if (initInProcess) {
-    return;
-  }
-  console.log('🔄️ filters changed', JSON.stringify(to))
-  page.value = 1;
-  checkboxes.value = [];
-  // update query param for each filter as filter_<column_name>=value
-  const query = {};
-  const currentQ = currentQuery();
-  filtersStore.filters.forEach(f => {
-    if (f.value) {
-      query[`filter__${f.field}__${f.operator}`] = encodeURIComponent(JSON.stringify(f.value));
-    }
-  });
-  // set every key in currentQ which starts with filter_ to undefined if it is not in query
-  Object.keys(currentQ).forEach(k => {
-    if (k.startsWith('filter_') && !query[k]) {
-      query[k] = undefined;
-    }
-  });
-  setQuery(query);
-}, {deep: true});
-
-onMounted(async () => {
-  initInProcess = true;
-  await init();
-  initThreeDotsDropdown();
-  initInProcess = false;
-});
-
-watch([page], async () => {
-  setQuery({ page: page.value });
-});
-
-
-
-
-watch([sort], async () => {
-  if (!sort.value.length) {
-    setQuery({ sort: undefined });
-    return;
-  }
-  setQuery({ sort: SortQuerySerializer.serialize(sort.value) });
-});
-
-
-</script>