Skip to content
Prev Previous commit
Next Next commit
Additional crud functionality
  • Loading branch information
nolanpro committed Sep 16, 2024
commit 58bfdc07ac1ee7744241797fe5340e9e99e0a71d
9 changes: 7 additions & 2 deletions ProcessMaker/Http/Controllers/Api/DevLinkController.php
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,17 @@ public function store(Request $request)
return $devLink;
}

public function update(Request $request, string $id)
public function update(Request $request, DevLink $devLink)
{
$devLink->name = $request->input('name');
$devLink->saveOrFail();

return $devLink;
}

public function destroy(string $id)
public function destroy(DevLink $devLink)
{
$devLink->delete();
}

public function ping(DevLink $devLink)
Expand Down
95 changes: 86 additions & 9 deletions resources/js/admin/devlink/components/Index.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
<script setup>
import { ref, onMounted } from 'vue';
import { ref, onMounted, useTemplateRef } from 'vue';
import Status from './Status.vue';
import EllipsisMenu from "../../../components/shared/EllipsisMenu.vue";

let devlinks = ref([]);
const devlinks = ref([]);
const confirmDeleteModal = ref(null);
const editModal = ref(null);

const fields = [
{
Expand All @@ -17,20 +20,30 @@ const fields = [
key: 'url',
label: 'URL'
},
'status'
{
key: 'status',
label: 'Status'
},
{
key: 'menu',
label: ''
},
];

onMounted(() => {
load();
});

const newName = ref('');
const newUrl = ref('');

const load = () => {
ProcessMaker.apiClient
.get('/devlink')
.then((result) => {
console.log("Got result", result);
devlinks.value = result.data;
});
});

const newName = ref('');
const newUrl = ref('');
};

const clear = () => {
newName.value = '';
Expand All @@ -54,11 +67,52 @@ const create = () => {
});
};

const selectInstance = (devlink) => {
// navigate using the vue router
$router.push({ path: `/admin/devlink/${devlink.id}` });
};

const selected = ref(null);
const editDevLink = (devlink) => {
selected.value = { ...devlink }; // copy the object
editModal.value.show();
};

const updateDevLink = () => {
ProcessMaker.apiClient
.put(`/devlink/${selected.value.id}`, {
name: selected.value.name
})
.then((result) => {
editModal.value.hide();
load();
});
};

const deleteDevLink = (devlink) => {
selected.value = devlink;
confirmDeleteModal.value.show();
};

const executeDelete = () => {
ProcessMaker.apiClient
.delete(`/devlink/${selected.value.id}`)
.then((result) => {
confirmDeleteModal.value.hide();
load();
});
}

</script>

<template>
<div>
<b-button variant="primary" v-b-modal.create>Create</b-button>

<b-modal ref="confirmDeleteModal" title="Delete DevLink" @ok="executeDelete">
<p>Are you sure you want to delete {{ selected?.name }}?</p>
</b-modal>

<b-modal id="create" title="Create new devlink" @hidden="clear" @ok="create">
<b-form-group label="Name">
<b-form-input v-model="newName"></b-form-input>
Expand All @@ -67,10 +121,33 @@ const create = () => {
<b-form-input v-model="newUrl"></b-form-input>
</b-form-group>
</b-modal>

<b-modal ref="editModal" title="Edit DevLink" @ok="updateDevLink">
<template v-if="selected">
<b-form-group label="Name">
<b-form-input v-model="selected.name"></b-form-input>
</b-form-group>
</template>
</b-modal>

<b-table :items="devlinks" :fields="fields">
<template #cell(name)="data">
<a href="#" @click="edit(data.item)">{{ data.item.name }}</a>
</template>
<template #cell(status)="data">
<Status :id="data.item.id" />
</template>
<template #cell(menu)="data">
<a href="#" @click="editDevLink(data.item)">Edit</a>
|
<a href="#" @click="deleteDevLink(data.item)">Delete</a>
</template>
</b-table>
</div>
</template>
</template>

<style lang="scss" scoped>
tr:hover {
cursor: pointer;
}
</style>