quasar-ui-danx 0.0.30 → 0.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

package/src/components/ActionTable/ActionMenu.vue

@@ -1,11 +1,15 @@
 <template>
   <PopoverMenu
-      class="px-4 h-full flex"
-      :items="items"
+      class="px-2 flex action-button"
+      :items="activeItems"
+      :disabled="targets.length === 0"
       @action-item="onAction"
-  />
+  >
+    <q-tooltip v-if="targets.length === 0">{{ tooltip }}</q-tooltip>
+  </PopoverMenu>
 </template>
 <script setup>
+import { computed } from 'vue';
 import { performAction } from '../../helpers';
 import { PopoverMenu } from '../Utility';
 
@@ -15,15 +19,23 @@ const props = defineProps({
     type: Array,
     required: true
   },
-  rows: {
+  targets: {
     type: Array,
     required: true
+  },
+  tooltip: {
+    type: String,
+    default: 'First select records to perform a batch action'
   }
 });
 
+const activeItems = computed(() => props.items.filter(item => {
+  if (item.enabled === undefined) return true;
+  return typeof item.enabled === 'function' ? !!item.enabled(props.targets?.[0] ?? null, props.targets) : !!item.enabled;
+}));
 
 function onAction(item) {
   emit('action', item);
-  performAction(item, props.rows);
+  performAction(item, props.targets);
 }
 </script>

package/src/components/ActionTable/ActionTable.vue

@@ -52,6 +52,7 @@
         <component
             :is="rowProps.col.onClick ? 'a' : 'div'"
             class="flex items-center flex-nowrap"
+            :class="{'justify-end': rowProps.col.align === 'right', 'justify-center': rowProps.col.align === 'center', 'justify-start': rowProps.col.align === 'left'}"
             @click="() => rowProps.col.onClick && rowProps.col.onClick(rowProps.row)"
         >
           <RenderComponent
@@ -72,7 +73,7 @@
           <ActionMenu
               v-if="rowProps.col.actions" class="ml-2"
               :items="rowProps.col.actions"
-              :rows="[rowProps.row]"
+              :targets="[rowProps.row]"
               @action="(action) => $emit('action', {action: action, row: rowProps.row})"
           />
         </component>

package/src/components/Utility/Popovers/PopoverMenu.vue

@@ -3,6 +3,7 @@
       class="p-3 actionable"
       :class="{'opacity-50 cursor-not-allowed': disabled}"
   >
+    <slot />
     <Transition
         mode="out-in"
         :duration="150"

package/src/components/Utility/Tools/ActionPerformerTool.vue

@@ -45,7 +45,15 @@ async function onConfirmAction(input) {
   const result = await props.action.onAction(props.targets, input);
   isSaving.value = false;
 
-  if (!result.success) {
+  if (result.success) {
+    FlashMessages.success(`The update was successful`);
+
+    if (props.action.onSuccess) {
+      await props.action.onSuccess(result, props.targets, input);
+    }
+
+    emit('done');
+  } else {
     const errors = [];
     if (result.errors) {
       errors.push(...result.errors);
@@ -62,16 +70,8 @@ async function onConfirmAction(input) {
     }
   }
 
-  FlashMessages.success(`The update was successful`);
-
-  if (props.action.onSuccess) {
-    await props.action.onSuccess(result, props.targets, input);
-  }
-
   if (props.action.onFinish) {
     await props.action.onFinish(result, props.targets, input);
   }
-
-  emit('done');
 }
 </script>

package/src/helpers/http.ts

@@ -1,26 +1,26 @@
 export const request = {
-  async get(url, options = {}) {
-    return fetch(url, {
-      method: "get",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json"
-      },
-      ...options
-    });
-  },
+    async get(url, options = {}) {
+        return fetch(url, {
+            method: "get",
+            headers: {
+                Accept: "application/json",
+                "Content-Type": "application/json"
+            },
+            ...options
+        }).then((r) => r.json());
+    },
 
-  async post(url, data = {}, options = {}) {
-    return fetch(url, {
-      method: "post",
-      body: JSON.stringify(data),
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json"
-      },
-      ...options
-    }).then((r) => r.json());
-  }
+    async post(url, data = {}, options = {}) {
+        return fetch(url, {
+            method: "post",
+            body: JSON.stringify(data),
+            headers: {
+                Accept: "application/json",
+                "Content-Type": "application/json"
+            },
+            ...options
+        }).then((r) => r.json());
+    }
 };
 
 /**
@@ -36,19 +36,19 @@ export const request = {
  * @returns {Promise<void>}
  */
 export async function fetchResourceListWithSelected(fetchFn, list, id, filter) {
-  // First make sure we have the selected record, so we can always add it to the list
-  let selectedResource;
-  if (id) {
-    selectedResource = list.value.find((c) => c.id === id) || (await fetchFn({ id }))[0];
-  }
+    // First make sure we have the selected record, so we can always add it to the list
+    let selectedResource;
+    if (id) {
+        selectedResource = list.value.find((c) => c.id === id) || (await fetchFn({ id }))[0];
+    }
 
-  // Get the filtered campaign list
-  list.value = await fetchFn(filter);
+    // Get the filtered campaign list
+    list.value = await fetchFn(filter);
 
-  // If our selected campaign is not in the filtered list, add it
-  if (selectedResource && !list.value.find((c) => c.id === id)) {
-    list.value.push(selectedResource);
-  }
+    // If our selected campaign is not in the filtered list, add it
+    if (selectedResource && !list.value.find((c) => c.id === id)) {
+        list.value.push(selectedResource);
+    }
 }
 
 /**
@@ -57,6 +57,6 @@ export async function fetchResourceListWithSelected(fetchFn, list, id, filter) {
  * @param url
  */
 export function getUrlParam(key, url = undefined) {
-  const params = new URLSearchParams(url?.replace(/.*\?/, "") || window.location.search);
-  return params.get(key);
+    const params = new URLSearchParams(url?.replace(/.*\?/, "") || window.location.search);
+    return params.get(key);
 }

package/src/helpers/performAction.ts

@@ -12,6 +12,17 @@ export const actionTargets = ref([]);
  * @returns {{performAction(name, targets): Promise<void>}}
  */
 export function usePerformAction(actions: any[]) {
+
+    function filterActions(filters) {
+        let filteredActions = [...actions];
+
+        for (const filter of Object.keys(filters)) {
+            const filterValue = filters[filter];
+            filteredActions = filteredActions.filter(a => a[filter] === filterValue || (Array.isArray(filterValue) && filterValue.includes(a[filter])));
+        }
+        return filteredActions;
+    }
+
     return {
         /**
          * Perform an action on a set of targets
@@ -29,7 +40,10 @@ export function usePerformAction(actions: any[]) {
             targets = Array.isArray(targets) ? targets : [targets];
 
             await performAction({ ...action, ...options }, targets);
-        }
+        },
+
+        actions,
+        filterActions,
     };
 }
 

package/src/styles/actions.scss

@@ -0,0 +1,10 @@
+.action-button {
+  cursor: pointer;
+  border-radius: 0.5em;
+  transition: all 0.5s;
+  outline: 1px solid transparent;
+
+  &:hover {
+    @apply bg-blue-light outline outline-blue-base;
+  }
+}