add builtin scripts support

src/components/ScriptManager.vue

@@ -34,7 +34,7 @@
             />
             <q-btn
               label="Delete"
-              :disable="scriptpk === null"
+              :disable="scriptpk === null || isBuiltInScript(scriptpk)"
               dense
               flat
               push
@@ -89,6 +89,7 @@
                 <q-td>{{ truncateText(props.row.description) }}</q-td>
                 <q-td>{{ props.row.filename }}</q-td>
                 <q-td>{{ props.row.shell }}</q-td>
+                <q-td>{{ props.row.script_type }}</q-td>
               </q-tr>
             </template>
           </q-table>
@@ -127,8 +128,8 @@ export default {
       code: null,
       pagination: {
         rowsPerPage: 0,
-        sortBy: "id",
-        descending: false
+        sortBy: "script_type",
+        descending: true,
       },
       columns: [
         { name: "id", label: "ID", field: "id" },
@@ -137,31 +138,38 @@ export default {
           label: "Name",
           field: "name",
           align: "left",
-          sortable: true
+          sortable: true,
         },
         {
           name: "desc",
           label: "Description",
           field: "description",
           align: "left",
-          sortable: false
+          sortable: false,
         },
         {
           name: "file",
           label: "File",
           field: "filename",
           align: "left",
-          sortable: true
+          sortable: true,
         },
         {
           name: "shell",
-          label: "Type",
+          label: "Shell",
           field: "shell",
           align: "left",
-          sortable: true
-        }
+          sortable: true,
+        },
+        {
+          name: "script_type",
+          label: "Type",
+          field: "script_type",
+          align: "left",
+          sortable: true,
+        },
       ],
-      visibleColumns: ["name", "desc", "file", "shell"]
+      visibleColumns: ["name", "desc", "file", "shell", "script_type"],
     };
   },
   methods: {
@@ -181,7 +189,7 @@ export default {
         title: this.filename,
         message: `<pre>${this.code}</pre>`,
         html: true,
-        style: "width: 70vw; max-width: 80vw;"
+        style: "width: 70vw; max-width: 80vw;",
       });
     },
     deleteScript() {
@@ -189,7 +197,7 @@ export default {
         .dialog({
           title: "Delete script?",
           cancel: true,
-          ok: { label: "Delete", color: "negative" }
+          ok: { label: "Delete", color: "negative" },
         })
         .onOk(() => {
           axios
@@ -226,16 +234,23 @@ export default {
     },
     truncateText(txt) {
       return txt.length >= 60 ? txt.substring(0, 60) + "..." : txt;
-    }
+    },
+    isBuiltInScript(pk) {
+      try {
+        return this.scripts.find(i => i.id === pk).script_type === "builtin" ? true : false;
+      } catch (e) {
+        return false;
+      }
+    },
   },
   computed: {
     ...mapState({
       toggleScriptManager: state => state.toggleScriptManager,
-      scripts: state => state.scripts
-    })
+      scripts: state => state.scripts,
+    }),
   },
   mounted() {
     this.getScripts();
-  }
+  },
 };
 </script>

src/components/modals/scripts/ScriptModal.vue

@@ -10,13 +10,25 @@
       <q-card-section class="row">
         <div class="col-2">Name:</div>
         <div class="col-10">
-          <q-input outlined dense v-model="script.name" :rules="[ val => !!val || '*Required']" />
+          <q-input
+            :disable="isBuiltInScript"
+            outlined
+            dense
+            v-model="script.name"
+            :rules="[ val => !!val || '*Required']"
+          />
         </div>
       </q-card-section>
       <q-card-section class="row">
         <div class="col-2">Description:</div>
         <div class="col-10">
-          <q-input outlined dense v-model="script.description" type="textarea" />
+          <q-input
+            :disable="isBuiltInScript"
+            outlined
+            dense
+            v-model="script.description"
+            type="textarea"
+          />
         </div>
       </q-card-section>
       <q-card-section class="row">
@@ -40,6 +52,7 @@
         <div v-if="mode === 'edit'" class="col-10">
           <q-file
             v-model="script.filename"
+            :disable="isBuiltInScript"
             label="Upload new script version"
             stack-label
             filled
@@ -55,6 +68,7 @@
       <q-card-section class="row">
         <div class="col-2">Type:</div>
         <q-select
+          :disable="isBuiltInScript"
           dense
           class="col-10"
           outlined
@@ -67,7 +81,13 @@
       </q-card-section>
       <q-card-section class="row items-center">
         <q-btn v-if="mode === 'add'" label="Upload" color="primary" type="submit" />
-        <q-btn v-else-if="mode === 'edit'" label="Edit" color="primary" type="submit" />
+        <q-btn
+          v-else-if="mode === 'edit'"
+          :disable="isBuiltInScript"
+          label="Edit"
+          color="primary"
+          type="submit"
+        />
       </q-card-section>
     </q-form>
   </q-card>
@@ -75,13 +95,15 @@
 
 <script>
 import axios from "axios";
+import { mapState } from "vuex";
 import mixins from "@/mixins/mixins";
+
 export default {
   name: "ScriptModal",
   mixins: [mixins],
   props: {
     scriptpk: Number,
-    mode: String
+    mode: String,
   },
   data() {
     return {
@@ -90,8 +112,8 @@ export default {
       shellOptions: [
         { label: "Powershell", value: "powershell" },
         { label: "Batch (CMD)", value: "cmd" },
-        { label: "Python", value: "python" }
-      ]
+        { label: "Python", value: "python" },
+      ],
     };
   },
   methods: {
@@ -146,12 +168,24 @@ export default {
           this.$q.loading.hide();
           this.notifyError(e.response.data.non_field_errors, 4000);
         });
-    }
+    },
+  },
+  computed: {
+    ...mapState({
+      scripts: state => state.scripts,
+    }),
+    isBuiltInScript() {
+      if (this.mode === "edit") {
+        return this.scripts.find(i => i.id === this.scriptpk).script_type === "builtin" ? true : false;
+      } else {
+        return false;
+      }
+    },
   },
   created() {
     if (this.mode === "edit") {
       this.getScript();
     }
-  }
+  },
 };
 </script>