From 809ed68cabb1ff8c91b958e3c8231271564728de Mon Sep 17 00:00:00 2001
From: ingalls <nick@ingalls.ca>
Date: Fri, 21 Jun 2024 15:52:49 -0600
Subject: [PATCH] Add Task Selection

---
 api/routes/task.ts                            |  60 ++++-
 api/web/src/components/Admin.vue              |  10 +-
 .../src/components/Admin/AdminRawTasks.vue    | 154 ++++++++++++
 api/web/src/components/Admin/AdminTasks.vue   | 237 +++++++++++-------
 .../src/components/Layer/utils/TaskModal.vue  | 188 ++++++++------
 api/web/src/main.js                           |   4 +
 6 files changed, 486 insertions(+), 167 deletions(-)
 create mode 100644 api/web/src/components/Admin/AdminRawTasks.vue

diff --git a/api/routes/task.ts b/api/routes/task.ts
index 3b7207b33..4980de312 100644
--- a/api/routes/task.ts
+++ b/api/routes/task.ts
@@ -57,7 +57,7 @@ export default async function router(schema: Schema, config: Config) {
         })
     }, async (req, res) => {
         try {
-            await Auth.as_user(config, req, { admin: true });
+            await Auth.as_user(config, req);
 
             const list = await config.models.Task.list({
                 limit: req.query.limit,
@@ -75,6 +75,29 @@ export default async function router(schema: Schema, config: Config) {
         }
     });
 
+    await schema.post('/task', {
+        name: 'Create Task',
+        group: 'Task',
+        description: 'Create Registered Task',
+        body: Type.Object({
+            name: Type.String(),
+            prefix: Type.String(),
+            repo: Type.Optional(Type.String()),
+            readme: Type.Optional(Type.String()),
+        }),
+        res: TaskResponse
+    }, async (req, res) => {
+        try {
+            await Auth.as_user(config, req);
+
+            const task = await config.models.Task.generate(req.body);
+
+            return res.json(task);
+        } catch (err) {
+            return Err.respond(err, res);
+        }
+    });
+
     await schema.get('/task/raw', {
         name: 'List Tasks',
         group: 'RawTask',
@@ -85,7 +108,7 @@ export default async function router(schema: Schema, config: Config) {
         })
     }, async (req, res) => {
         try {
-            await Auth.as_user(config, req, { admin: true });
+            await Auth.as_user(config, req);
 
             const { total, tasks } = await listTasks();
 
@@ -111,7 +134,7 @@ export default async function router(schema: Schema, config: Config) {
         })
     }, async (req, res) => {
         try {
-            await Auth.as_user(config, req, { admin: true });
+            await Auth.as_user(config, req);
 
             // Stuck with this approach for now - https://github.com/aws/containers-roadmap/issues/418
             const { tasks } = await listTasks();
@@ -136,7 +159,7 @@ export default async function router(schema: Schema, config: Config) {
         res: StandardResponse
     }, async (req, res) => {
         try {
-            await Auth.as_user(config, req, { admin: true });
+            await Auth.as_user(config, req);
 
             const { tasks } = await listTasks();
 
@@ -164,4 +187,33 @@ export default async function router(schema: Schema, config: Config) {
             return Err.respond(err, res);
         }
     });
+
+    await schema.get('/task/prefix/:prefix/readme', {
+        name: 'Task README',
+        group: 'Task',
+        description: 'Return README Contents',
+        params: Type.Object({
+            prefix: Type.String()
+        }),
+        res: Type.Object({
+            body: Type.String()
+        })
+    }, async (req, res) => {
+        try {
+            await Auth.as_user(config, req);
+
+            const task = await config.models.Task.from(req.params.prefix);
+
+            if (task.readme) {
+                const readmeres = await fetch(task.readme);
+                return res.json({
+                    body: await readmeres.text()
+                })
+            } else {
+                return res.json({ body: '' });
+            }
+        } catch (err) {
+            return Err.respond(err, res);
+        }
+    });
 }
diff --git a/api/web/src/components/Admin.vue b/api/web/src/components/Admin.vue
index 0da01ffbe..74574acf8 100644
--- a/api/web/src/components/Admin.vue
+++ b/api/web/src/components/Admin.vue
@@ -51,6 +51,14 @@
                                                 }'
                                                 @click='$router.push(`/admin/config`)'
                                             ><IconSettings size='32' /><span class='mx-3'>Settings</span></span>
+                                            <span
+                                                class='list-group-item list-group-item-action d-flex align-items-center'
+                                                :class='{
+                                                    "active": $route.name === "admin-task-raw",
+                                                    "cursor-pointer": $route.name !== "admin-task-raw"
+                                                }'
+                                                @click='$router.push(`/admin/task-raw`)'
+                                            ><IconBrandDocker size='32' /><span class='mx-3'>ETL Containers</span></span>
                                             <span
                                                 class='list-group-item list-group-item-action d-flex align-items-center'
                                                 :class='{
@@ -58,7 +66,7 @@
                                                     "cursor-pointer": $route.name !== "admin-task"
                                                 }'
                                                 @click='$router.push(`/admin/task`)'
-                                            ><IconBrandDocker size='32' /><span class='mx-3'>ETL Tasks</span></span>
+                                            ><IconBrandDocker size='32' /><span class='mx-3'>Registered Tasks</span></span>
                                             <span
                                                 class='list-group-item list-group-item-action d-flex align-items-center'
                                                 :class='{
diff --git a/api/web/src/components/Admin/AdminRawTasks.vue b/api/web/src/components/Admin/AdminRawTasks.vue
new file mode 100644
index 000000000..047da2763
--- /dev/null
+++ b/api/web/src/components/Admin/AdminRawTasks.vue
@@ -0,0 +1,154 @@
+<template>
+    <div>
+        <div class='card-header'>
+            <template v-if='task'>
+                <IconCircleArrowLeft
+                    size='32'
+                    class='cursor-pointer'
+                    @click='task = null'
+                />
+                <h3
+                    class='mx-2 card-title'
+                    v-text='task'
+                />
+            </template>
+            <template v-else>
+                <h3 class='card-title'>
+                    ETL Task Containers
+                </h3>
+            </template>
+            <div class='ms-auto'>
+                <div class='btn-list' />
+            </div>
+        </div>
+
+        <div style='min-height: 20vh; margin-bottom: 61px'>
+            <TablerLoading v-if='loading' />
+            <TablerNone
+                v-else-if='!Object.keys(tasks.items)'
+                label='Tasks'
+                :create='false'
+            />
+            <template v-else-if='task'>
+                <TablerNone
+                    v-if='!tasks.items[task].length'
+                    label='Versions'
+                    :create='false'
+                />
+                <div
+                    v-else
+                    class='table-responsive'
+                >
+                    <table class='table card-table table-hover table-vcenter datatable cursor-pointer'>
+                        <tbody>
+                            <tr
+                                v-for='version in tasks.items[task]'
+                                :key='version'
+                            >
+                                <td>
+                                    <div class='d-flex align-items-center'>
+                                        <span v-text='version' />
+                                        <div class='ms-auto'>
+                                            <TablerDelete
+                                                displaytype='icon'
+                                                @delete='deleteVersion(task, version)'
+                                            />
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div
+                    class='position-absolute bottom-0 w-100'
+                    style='height: 61px;'
+                >
+                    <TableFooter
+                        :limit='tasks.items[task].length'
+                        :total='tasks.items[task].length'
+                        @page='0'
+                    />
+                </div>
+            </template>
+            <template v-else>
+                <div class='table-responsive'>
+                    <table class='table card-table table-hover table-vcenter datatable cursor-pointer'>
+                        <tbody>
+                            <tr
+                                v-for='t in Object.keys(tasks.items)'
+                                :key='t'
+                                @click='task = t'
+                            >
+                                <td v-text='t' />
+                                <td v-text='`${tasks.items[t].length} Versions`' />
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div
+                    class='position-absolute bottom-0 w-100'
+                    style='height: 61px;'
+                >
+                    <TableFooter
+                        :limit='Object.keys(tasks.items).length'
+                        :total='Object.keys(tasks.items).length'
+                        @page='0'
+                    />
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+import { std } from '/src/std.ts';
+import {
+    TablerLoading,
+    TablerDelete,
+    TablerNone,
+} from '@tak-ps/vue-tabler';
+import TableFooter from '../util/TableFooter.vue'
+import {
+    IconCircleArrowLeft
+} from '@tabler/icons-vue';
+
+export default {
+    name: 'AdminTask',
+    components: {
+        TablerLoading,
+        TablerDelete,
+        TablerNone,
+        TableFooter,
+        IconCircleArrowLeft,
+    },
+    data: function() {
+        return {
+            loading: true,
+            task: null,
+            tasks: {
+                total: 0,
+                items: {}
+            }
+        }
+    },
+    mounted: async function() {
+        await this.fetch();
+    },
+    methods: {
+        fetch: async function() {
+            this.loading = true;
+            this.tasks = await std(`/api/task/raw`);
+            this.loading = false;
+        },
+        deleteVersion: async function(task, version) {
+            this.loading = true;
+            this.tasks = await std(`/api/task/raw/${task}/version/${version}`, {
+                method: 'DELETE'
+            });
+
+            await this.fetch();
+        }
+    }
+}
+</script>
diff --git a/api/web/src/components/Admin/AdminTasks.vue b/api/web/src/components/Admin/AdminTasks.vue
index c1f6b88a5..4a29d1d54 100644
--- a/api/web/src/components/Admin/AdminTasks.vue
+++ b/api/web/src/components/Admin/AdminTasks.vue
@@ -1,87 +1,88 @@
 <template>
     <div>
         <div class='card-header'>
-            <template v-if='task'>
-                <IconCircleArrowLeft
+            <h1 class='card-title'>
+                Registered Tasks
+            </h1>
+
+            <div class='ms-auto btn-list'>
+                <IconPlus
+                    v-tooltip='"Register New Task"'
                     size='32'
                     class='cursor-pointer'
-                    @click='task = null'
+                    @click='edit = {
+                        "name": "",
+                        "prefix": "",
+                        "readme": "",
+                        "repo": ""
+                    }'
                 />
-                <h3
-                    class='mx-2 card-title'
-                    v-text='task'
+                <IconRefresh
+                    v-tooltip='"Refresh"'
+                    size='32'
+                    class='cursor-pointer'
+                    @click='fetchList'
                 />
-            </template>
-            <template v-else>
-                <h3 class='card-title'>
-                    ETL Tasks
-                </h3>
-            </template>
-            <div class='ms-auto'>
-                <div class='btn-list' />
             </div>
         </div>
-
         <div style='min-height: 20vh; margin-bottom: 61px'>
-            <TablerLoading v-if='loading' />
-            <TablerNone
-                v-else-if='!Object.keys(tasks.items)'
-                label='Tasks'
-                :create='false'
-            />
-            <template v-else-if='task'>
+
+            <template v-if='edit'>
+                <TablerLoading
+                    v-if='loading'
+                    desc='Saving Tasks'
+                />
+                <template v-else>
+                    <div class='row g-2 col-12 py-2 px-2'>
+                        <TablerInput label='Task Name' v-model='edit.name'/>
+
+                        <TablerInput :disabled='edit.id' label='Container Prefix' v-model='edit.prefix'/>
+
+                        <TablerInput label='Task Code Repository URL' v-model='edit.repo'/>
+
+                        <TablerInput label='Task Markdown Readme URL' v-model='edit.readme'/>
+
+                        <div class='col-12 d-flex py-2'>
+                            <button @click='edit = false' class='btn btn-secondary'>Cancel</button>
+                            <div class='ms-auto btn-list mx-3'>
+                                <button @click='saveTask' class='btn btn-primary'>Save</button>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </template>
+            <template v-else>
+                <TablerLoading
+                    v-if='loading'
+                    desc='Loading Tasks'
+                />
                 <TablerNone
-                    v-if='!tasks.items[task].length'
-                    label='Versions'
+                    v-else-if='!list.items.length'
+                    label='Tasks'
                     :create='false'
                 />
                 <div
                     v-else
                     class='table-responsive'
                 >
-                    <table class='table card-table table-hover table-vcenter datatable cursor-pointer'>
-                        <tbody>
-                            <tr
-                                v-for='version in tasks.items[task]'
-                                :key='version'
-                            >
-                                <td>
-                                    <div class='d-flex align-items-center'>
-                                        <span v-text='version' />
-                                        <div class='ms-auto'>
-                                            <TablerDelete
-                                                displaytype='icon'
-                                                @delete='deleteVersion(task, version)'
-                                            />
-                                        </div>
-                                    </div>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <div
-                    class='position-absolute bottom-0 w-100'
-                    style='height: 61px;'
-                >
-                    <TableFooter
-                        :limit='tasks.items[task].length'
-                        :total='tasks.items[task].length'
-                        @page='0'
-                    />
-                </div>
-            </template>
-            <template v-else>
-                <div class='table-responsive'>
-                    <table class='table card-table table-hover table-vcenter datatable cursor-pointer'>
+                    <table class='table card-table table-hover table-vcenter datatable'>
+                        <TableHeader
+                            v-model:sort='paging.sort'
+                            v-model:order='paging.order'
+                            v-model:header='header'
+                        />
                         <tbody>
                             <tr
-                                v-for='t in Object.keys(tasks.items)'
-                                :key='t'
-                                @click='task = t'
+                                v-for='layer in list.items'
+                                :key='layer.id'
                             >
-                                <td v-text='t' />
-                                <td v-text='`${tasks.items[t].length} Versions`' />
+                                <template v-for='h in header'>
+                                    <template v-if='h.display'>
+                                        <td>
+                                            <span v-text='layer[h.name]' />
+                                        </td>
+                                    </template>
+                                </template>
                             </tr>
                         </tbody>
                     </table>
@@ -91,9 +92,9 @@
                     style='height: 61px;'
                 >
                     <TableFooter
-                        :limit='Object.keys(tasks.items).length'
-                        :total='Object.keys(tasks.items).length'
-                        @page='0'
+                        :limit='paging.limit'
+                        :total='list.total'
+                        @page='paging.page = $event'
                     />
                 </div>
             </template>
@@ -102,52 +103,108 @@
 </template>
 
 <script>
-import { std } from '/src/std.ts';
+import { std, stdurl, stdclick } from '/src/std.ts';
+import TableHeader from '../util/TableHeader.vue'
+import TableFooter from '../util/TableFooter.vue'
 import {
-    TablerLoading,
-    TablerDelete,
     TablerNone,
+    TablerInput,
+    TablerLoading
 } from '@tak-ps/vue-tabler';
-import TableFooter from '../util/TableFooter.vue'
 import {
-    IconCircleArrowLeft
-} from '@tabler/icons-vue';
+    IconPlus,
+    IconRefresh,
+} from '@tabler/icons-vue'
 
 export default {
-    name: 'AdminTask',
+    name: 'RegisteredTasksAdmin',
     components: {
-        TablerLoading,
-        TablerDelete,
+        TablerInput,
         TablerNone,
+        IconPlus,
+        IconRefresh,
+        TablerLoading,
+        TableHeader,
         TableFooter,
-        IconCircleArrowLeft,
     },
     data: function() {
         return {
+            err: false,
             loading: true,
-            task: null,
-            tasks: {
+            header: [],
+            edit: false,
+            paging: {
+                filter: '',
+                sort: 'name',
+                order: 'asc',
+                limit: 100,
+                page: 0
+            },
+            list: {
                 total: 0,
-                items: {}
+                items: []
+            }
+        }
+    },
+    watch: {
+       paging: {
+            deep: true,
+            handler: async function() {
+                await this.fetchList();
             }
         }
     },
     mounted: async function() {
-        await this.fetch();
+        await this.listLayerSchema();
+        await this.fetchList();
     },
     methods: {
-        fetch: async function() {
-            this.loading = true;
-            this.tasks = await std(`/api/task/raw`);
-            this.loading = false;
+        stdclick,
+        listLayerSchema: async function() {
+            const schema = await std('/api/schema?method=GET&url=/task');
+            this.header = ['name', 'prefix'].map((h) => {
+                return { name: h, display: true };
+            });
+
+            this.header.push(...schema.query.properties.sort.enum.map((h) => {
+                return {
+                    name: h,
+                    display: false
+                }
+            }).filter((h) => {
+                for (const hknown of this.header) {
+                    if (hknown.name === h.name) return false;
+                }
+                return true;
+            }));
         },
-        deleteVersion: async function(task, version) {
+        saveTask: async function() {
             this.loading = true;
-            this.tasks = await std(`/api/task/raw/${task}/version/${version}`, {
-                method: 'DELETE'
-            });
 
-            await this.fetch();
+            if (this.edit.id) {
+                const url = await std(`/api/task/${this.edit.prefix}`, {
+                    method: 'PATCH',
+                    body: this.edit
+                });
+            } else {
+                const url = await std('/api/task', {
+                    method: 'POST',
+                    body: this.edit
+                });
+            }
+
+            this.edit = false
+
+            await this.fetchList();
+        },
+        fetchList: async function() {
+            this.loading = true;
+            const url = stdurl('/api/task');
+            if (this.query && this.paging.filter) url.searchParams.append('filter', this.paging.filter);
+            url.searchParams.append('limit', this.paging.limit);
+            url.searchParams.append('page', this.paging.page);
+            this.list = await std(url);
+            this.loading = false;
         }
     }
 }
diff --git a/api/web/src/components/Layer/utils/TaskModal.vue b/api/web/src/components/Layer/utils/TaskModal.vue
index c2d88d699..68fa5bb8b 100644
--- a/api/web/src/components/Layer/utils/TaskModal.vue
+++ b/api/web/src/components/Layer/utils/TaskModal.vue
@@ -1,73 +1,75 @@
 <template>
-    <TablerModal>
+    <TablerModal size='xl'>
         <button
             type='button'
             class='btn-close'
             aria-label='Close'
-            @click='close'
+            @click='$emit("close")'
         />
         <div class='modal-status bg-yellow' />
         <div class='modal-body py-4'>
-            <template v-if='loading'>
-                <TablerLoading />
-            </template>
-            <template v-else-if='!newtask'>
-                <h3 class='subtitle-header'>
-                    Available Tasks:
-                </h3>
-                <div class='list-group list-group-flush'>
-                    <a
-                        v-for='image in Object.keys(list.items)'
-                        :key='image'
-                        class='list-group-item list-group-item-action cursor-pointer'
-                        @click='newtask = image'
-                    >
-                        <span v-text='image' />
-                    </a>
-                </div>
-            </template>
-            <template v-else-if='!version'>
-                <div class='d-flex'>
-                    <IconArrowBack
-                        size='32'
-                        class='mx-3'
-                        @click='newtask=null'
-                    />
-                    <h3 class='subtitle-header'>
-                        Available Versions
-                    </h3>
-                </div>
-
-                <div class='list-group list-group-flush'>
-                    <a
-                        v-for='v in list.items[newtask]'
-                        :key='v'
-                        class='list-group-item list-group-item-action cursor-pointer'
-                        @click='version = v'
-                    ><span v-text='v' /></a>
-                </div>
-            </template>
+            <TablerLoading v-if='loading.tasks' desc='Loading Tasks'/>
             <template v-else>
-                <div class='d-flex'>
-                    <IconArrowBack
-                        size='32'
-                        class='mx-3'
-                        @click='version=null'
-                    />
-                    <h3 class='subtitle-header'>
-                        Selected Task
-                    </h3>
-                </div>
+                <div class='row g-0'>
+                    <div class='col-12 col-md-3 border-end'>
+                        <div class='card-header'>
+                            <div class='card-title subheader'>
+                                Task Selection
+                            </div>
+                        </div>
+                        <div class='card-body'>
+                            <div class='list-group list-group-transparent'>
+                                <span
+                                    :key='t.prefix'
+                                    v-for='t of list.items'
+                                    class='list-group-item list-group-item-action d-flex align-items-center'
+                                    :class='{
+                                        "active": current.prefix === t.prefix,
+                                        "cursor-pointer": current.prefix !== t.prefix
+                                    }'
+                                    @click='current = t'
+                                >
+                                    <IconServer :size='32'/>
+
+                                    <span class='mx-3' v-text='t.name'/>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class='col-12 col-md-9 position-relative'>
+                        <TablerLoading v-if='loading.task' desc='Loading Task'/>
+                        <TablerNone v-else-if='!current' :create='false'/>
+                        <div v-else>
+                            <div class='card-header d-flex align-items-center'>
+                                <div class='card-title subheader' v-text='current.name'></div>
 
-                <pre v-text='`${newtask}-v${version}`' />
+                                <div class='ms-auto btn-list'>
+                                    <div class='subheader' v-text='`(${current.prefix})`'></div>
 
-                <div class='d-flex'>
-                    <div class='ms-auto'>
-                        <div
-                            class='btn btn-primary'
-                            @click='$emit("task", `${newtask}-v${version}`)'
-                        >
-                            Select
+                                    <IconCode v-if='current.repo' :size='32' @click='external(current.repo)'/>
+                                </div>
+                            </div>
+                            <div class='card-body'>
+                                <TablerMarkdown
+                                    class='card-body'
+                                    :markdown='current.readme'
+                                />
+                            </div>
+                            <div class='card-footer'>
+                                <div class='row g-2'>
+                                    <template v-if='versions.length'>
+                                        <div class='col-md-8'>
+                                            <TablerEnum :options='versions' v-model='version'/>
+                                        </div>
+                                        <div class='col-md-4'>
+                                            <button class='btn btn-primary w-100' style='margin-top: 8px;'>Select</button>
+                                        </div>
+                                    </template>
+                                    <template v-else>
+                                        Task is registered but contains no active versions
+                                    </template>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -79,19 +81,27 @@
 <script>
 import { std } from '/src/std.ts';
 import {
+    IconCode,
     IconArrowBack
 } from '@tabler/icons-vue'
 import {
+    TablerMarkdown,
     TablerLoading,
     TablerModal,
+    TablerNone,
+    TablerEnum,
 } from '@tak-ps/vue-tabler';
 
 export default {
     name: 'TaskModal',
     components: {
+        IconCode,
         IconArrowBack,
         TablerLoading,
-        TablerModal
+        TablerMarkdown,
+        TablerModal,
+        TablerNone,
+        TablerEnum,
     },
     props: {
         task: {
@@ -105,29 +115,63 @@ export default {
     ],
     data: function() {
         return {
-            loading: true,
-            newtask: false,
-            version: false,
+            loading: {
+                version: false,
+                tasks: true
+            },
+            current: false,
+            version: '',
+            versions: [],
             list: {
                 total: 0,
                 items: {}
             }
         }
     },
+    watch: {
+        current: async function() {
+            await this.fetchTask();
+        }
+    },
     mounted: async function() {
-        await this.fetch();
-
-        const task = this.task.replace(/-v[0-9]+\.[0-9]+\.[0-9]+$/, '');
-        if (this.list.items[task]) this.newtask = task;
+        await this.fetchTasks();
     },
     methods: {
-        close: function() {
-            this.$emit('close');
+        external: function(repo) {
+            window.open(repo, '_blank');
         },
-        fetch: async function() {
-            this.loading = true;
+        fetchTask: async function() {
+            if (!this.current) {
+                this.versions = [];
+            } else {
+                this.loading.task = true;
+                const task = await std(`/api/task/raw/${this.current.prefix}`);
+
+                console.error(task);
+
+                this.versions = task.versions;
+
+                if (this.versions.length) {
+                    this.version = this.versions[0];
+                }
+            }
+
+            if (this.current.readme) {
+                const readme = await std(`/api/task/prefix/${this.current.prefix}/readme`);
+                this.current.readme = readme.body;
+            }
+
+            this.loading.task = false;
+        },
+        fetchTasks: async function() {
+            this.loading.tasks = true;
             this.list = await std('/api/task');
-            this.loading = false;
+
+            if (this.list.total) {
+                this.current = this.list.items[0];
+            }
+
+            this.loading.tasks = false;
         }
     }
 }
diff --git a/api/web/src/main.js b/api/web/src/main.js
index c48e8c3c0..e6041d4eb 100644
--- a/api/web/src/main.js
+++ b/api/web/src/main.js
@@ -342,6 +342,10 @@ const router = new VueRouter.createRouter({
                 path: 'task',
                 name: 'admin-task',
                 component: () => import('./components/Admin/AdminTasks.vue')
+            },{
+                path: 'task-raw',
+                name: 'admin-task-raw',
+                component: () => import('./components/Admin/AdminRawTasks.vue')
             },{
                 path: 'server',
                 name: 'admin-server',