adminforth 1.3.54-next.24 → 1.3.54-next.26

package/spa/src/views/EditView.vue

@@ -0,0 +1,170 @@
+<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(true);
+
+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

@@ -0,0 +1,352 @@
+<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>