add supported_platforms and hidden field to scripts and filter in script dialogs and allow editing in script forms

This commit is contained in:
sadnub
2022-03-10 20:01:24 -05:00
parent 57be74bb42
commit ebd9512d4d
8 changed files with 125 additions and 38 deletions

View File

@@ -66,6 +66,16 @@
@click="setShowCommunityScripts(!showCommunityScripts)"
/>
<q-btn
dense
flat
no-caps
class="q-ml-sm"
:label="showHiddenScripts ? 'Hide Hidden Scripts' : 'Show Hidden Scripts'"
:icon="showHiddenScripts ? 'visibility_off' : 'visibility'"
@click="showHiddenScripts = !showHiddenScripts"
/>
<q-space />
<q-input v-model="search" style="width: 300px" label="Search" dense outlined clearable class="q-pr-md q-pb-xs">
<template v-slot:prepend>
@@ -110,7 +120,9 @@
<q-tooltip> Shell </q-tooltip>
</q-icon>
<span class="q-pl-xs text-weight-bold">{{ props.node.name }}</span>
<span class="q-pl-xs text-weight-bold" :style="{ color: props.node.hidden ? 'grey' : '' }">{{
props.node.name
}}</span>
<span class="q-pl-xs">{{ props.node.description }}</span>
</div>
@@ -171,6 +183,15 @@
<q-item-section>Download Script</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click="hideScript(props.node)">
<q-item-section side>
<q-icon :name="props.node.hidden ? 'visibility' : 'visibility_off'" />
</q-item-section>
<q-item-section>{{ props.node.hidden ? "Show Script" : "Hide Script" }}</q-item-section>
</q-item>
<q-separator></q-separator>
<q-item clickable v-close-popup>
@@ -272,6 +293,15 @@
<q-item-section>Download Script</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click="hideScript(props.row)">
<q-item-section side>
<q-icon :name="props.row.hidden ? 'visibility' : 'visibility_off'" />
</q-item-section>
<q-item-section>{{ props.row.hidden ? "Show Script" : "Hide Script" }}</q-item-section>
</q-item>
<q-separator></q-separator>
<q-item clickable v-close-popup>
@@ -279,9 +309,11 @@
</q-item>
</q-list>
</q-menu>
<!-- favorite -->
<q-td>
<q-icon v-if="props.row.favorite" color="yellow-8" name="star" size="sm" />
</q-td>
<!-- shell icon -->
<q-td>
<q-icon v-if="props.row.shell === 'powershell'" name="mdi-powershell" color="primary" size="sm">
<q-tooltip> Powershell </q-tooltip>
@@ -296,8 +328,14 @@
<q-tooltip> Shell </q-tooltip>
</q-icon>
</q-td>
<!-- name -->
<!-- supported platforms -->
<q-td>
<q-badge v-for="plat in props.row.supported_platforms" :key="plat" color="primary" class="q-pr-xs">{{
capitalize(plat)
}}</q-badge>
</q-td>
<!-- name -->
<q-td :style="{ color: props.row.hidden ? 'grey' : '' }">
{{ truncateText(props.row.name, 50) }}
<q-tooltip v-if="props.row.name.length >= 50" style="font-size: 12px">
{{ props.row.name }}
@@ -334,6 +372,7 @@ import { ref, computed, watch, onMounted } from "vue";
import { useStore } from "vuex";
import { useQuasar, useDialogPluginComponent, exportFile } from "quasar";
import { fetchScripts, editScript, downloadScript, removeScript } from "@/api/scripts";
import { capitalize } from "@/utils/format";
import { truncateText } from "@/utils/format";
import { notifySuccess } from "@/utils/notify";
@@ -358,6 +397,13 @@ const columns = [
align: "left",
sortable: true,
},
{
name: "supported_platforms",
label: "Platforms",
field: "supported_platforms",
align: "left",
sortable: true,
},
{
name: "name",
label: "Name",
@@ -409,11 +455,12 @@ export default {
// script manager logic
const scripts = ref([]);
const showHiddenScripts = ref(false);
async function getScripts() {
loading.value = true;
try {
scripts.value = await fetchScripts();
scripts.value = await fetchScripts({ showHiddenScripts: true });
} catch (e) {
console.error(e);
}
@@ -432,6 +479,18 @@ export default {
loading.value = false;
}
async function hideScript(script) {
loading.value = true;
const notifyText = !script.hidden ? "Script was hidden!" : "Script was unhidden!";
try {
const result = await editScript({ id: script.id, hidden: !script.hidden });
await getScripts();
notifySuccess(notifyText);
} catch (e) {}
loading.value = false;
}
function deleteScript(script) {
$q.dialog({
title: `Delete script: ${script.name}?`,
@@ -467,9 +526,15 @@ export default {
const expanded = ref([]);
const loading = ref(false);
const visibleScripts = computed(() =>
showCommunityScripts.value ? scripts.value : scripts.value.filter(i => i.script_type !== "builtin")
);
const visibleScripts = computed(() => {
if (showHiddenScripts.value) {
return showCommunityScripts.value ? scripts.value : scripts.value.filter(i => i.script_type !== "builtin");
} else {
return showCommunityScripts.value
? scripts.value.filter(i => !i.hidden)
: scripts.value.filter(i => i.script_type !== "builtin" && !i.hidden);
}
});
const categories = computed(() => {
let list = [];
@@ -617,6 +682,7 @@ export default {
expanded,
loading,
showCommunityScripts,
showHiddenScripts,
// computed
visibleScripts,
@@ -628,6 +694,7 @@ export default {
getScripts,
deleteScript,
favoriteScript,
hideScript,
exportScript,
// dialog methods
@@ -644,6 +711,7 @@ export default {
// helper methods
truncateText,
capitalize,
// quasar dialog plugin
dialogRef,
@@ -651,4 +719,4 @@ export default {
};
},
};
</script>
</script>