Related
I am working on vue.js and backend is laravel. I am new to these technologies.
I am trying to display data in parent and child rows in a table base on vue material syntax.
My Laravel controlller function contains the code
$tasks = Task::select('tasks_status', DB::raw("group_concat(CONCAT('{\"id\":\"',id,'\",\"name\":\"',name,'\"}') ) as subrow"))
->where('tasks_status', '<>', "Sent Tasks")
->whereNull('user_id')
->orderBy('id', 'desc')
->groupBy('tasks_status')
->get();
I am trying to get data grouped by task_status. For each task status there are multiple rows.
My JSON is like below -
[
{
"tasks_status": "Completed Task",
"subrow": "{\"id\":\"4\",\"name\":\"d1\"}"
},
{
"tasks_status": "My Tasks",
"subrow": "{\"id\":\"2\",\"name\":\"b1\"},{\"id\":\"7\",\"name\":\"g1\"}"
}
]
Online JSON Parser validates it.
in Vue Front end I try to display this JSON data using 2 for loops Like below
<md-table v-model="searched" md-sort="name" md-sort-order="asc" md-fixed-header class="table-sort">
<md-table-toolbar>
<div class="md-toolbar-section-start">
<h1 class="md-title">Tasks</h1>
</div>
<md-field md-clearable class="md-toolbar-section-end">
<label for="Tasks">Tasks</label>
<md-select v-model="fieldsSearchTerm.searchTermForDataTable" name="search" id="search" #input="searchOnTable" >
<md-option value="">All Tasks</md-option>
<md-option value="My Tasks">My Tasks</md-option>
<md-option value="Organization Tasks"
>Organization Tasks</md-option
>
<md-option value="Received Tasks"
>Received Tasks</md-option
>
<md-option value="Completed Task"
>Completed Task</md-option
>
<md-option value="Incomplete Tasks"
>Incomplete Tasks</md-option
>
<md-option value="Sent Tasks">Sent Tasks</md-option>
</md-select>
</md-field>
<md-field md-clearable class="md-toolbar-section-end">
<b-button class="btn btn-danger modal-btn" block #click="changeStatusToDone">Done</b-button>
</md-field>
</md-table-toolbar>
<md-table-empty-state
md-label="No data found">
</md-table-empty-state>
<md-table-row slot="md-table-row" v-for="rowHeading in searched" >
<md-table-cell md-label="Task Name" md-sort-by="name">{{ rowHeading.tasks_status }}</md-table-cell>
<md-table-cell md-label="Task Status" md-sort-by="tasks_status"></md-table-cell>
<md-table-cell md-label="Due Date" md-sort-by="due_date"></md-table-cell>
<md-table-cell md-label="Priority" md-sort-by="priority"></md-table-cell>
<md-table-cell md-label="Actions" md-sort-by="">
</md-table-cell>
</md-table-row>
<md-table-row slot="md-table-row" v-for="subRowElements in rowHeading.subrow">
<md-table-cell md-label="" md-sort-by="" >
</md-table-cell>
<md-table-cell colspan=4 md-label="Task Name" md-sort-by="name">hi {{ subRowElements }}</md-table-cell>
</md-table-cell>
</md-table-row>
</md-table>
In My JS I have code like this below
import Cookies from 'js-cookie'
import axios from "axios"
import Vue from 'vue'
import VueResource from 'vue-resource'
import Form from 'vform'
const toLower = text => {
return text.toString().toLowerCase()
}
const searchByName = (items, term) => {
if (term) {
return items.filter(item => toLower(item.tasks_status).includes(toLower(term)))
}
return items
}
export default {
name: 'TableSearch',
components: {
},
data() {
form: new Form({
tasks_statusUpdate: '',
nameUpdate: '',
priorityUpdate: '',
task_descriptionUpdate: '',
dueDateUpdate: '',
taskAssignedToUserUpdate: '',
_token: Cookies.get('token')
})
return {
goods: [],
fieldsUpdate: {
tasks_statusUpdate: "",
nameUpdate: "",
priorityUpdate: "",
task_descriptionUpdate: '',
dueDateUpdate: "",
taskAssignedToUserUpdate: "",
_token: Cookies.get('token'),
},
fieldsView: {
tasks_statusView: "",
nameView: "",
priorityView: "",
task_descriptionView: '',
dueDateView: "",
taskAssignedToUserView: "",
userNameView: "",
},
fieldsTaskDone: {
tasks_status: 1,
},
fieldsSearchTerm: {
searchTermForDataTable: '',
},
fieldsCheckBox: {
cboTaskName: true,
cboTaskStatus: true,
cboDueDate: true,
cboPriority: true,
},
isOpen: true,
rows: null,
allUsersUpdate: [],
searched: [],
rowHeading:[],
subRowElements:[],
users: [
{
id: 1,
name: "Shawna Dubbin",
email: "sdubbin0#geocities.com",
date: "20/02/2021",
priority: "High"
},
{
id: 2,
name: "Shawna Dubbin",
email: "sdubbin0#geocities.com",
date: "20/02/2021",
priority: "High"
},
{
id: 3,
name: "Shawna Dubbin",
email: "sdubbin0#geocities.com",
date: "20/02/2021",
priority: "High"
},
{
id: 4,
name: "Shawna Dubbin",
email: "sdubbin0#geocities.com",
date: "20/02/2021",
priority: "High"
},
{
id: 5,
name: "Shawna Dubbin",
email: "sdubbin0#geocities.com",
date: "20/02/2021",
priority: "High"
},
{
id: 6,
name: "Shawna Dubbin",
email: "sdubbin0#geocities.com",
date: "20/02/2021",
priority: "High"
},
{
id: 7,
name: "Shawna Dubbin",
email: "sdubbin0#geocities.com",
date: "20/02/2021",
priority: "High"
},
{
id: 8,
name: "Shawna Dubbin",
email: "sdubbin0#geocities.com",
date: "20/02/2021",
priority: "High"
},
{
id: 9,
name: "Shawna Dubbin",
email: "sdubbin0#geocities.com",
date: "20/02/2021",
priority: "High"
},
{
id: 10,
name: "Shawna vishal",
email: "sdubbin0#geocities.com",
date: "20/02/2021",
priority: "High"
},
],
rows: [],
editing_record_id: 0,
view_record_id: 0,
checkedTaskIDs: [],
dynamicColumn: [],
}
},
methods: {
newUser () {
window.alert('Noop')
},
searchOnTable () {
this.makeGetRequest();
this.searched = searchByName(this.rows, this.search)
},
fnDynamicColumns: function(e){
if (e.target.checked) {
console.log(e.target.value)
}
},
check_task_id: function(e) {
if (e.target.checked) {
console.log(e.target.value)
}
},
changeStatusToDone () {
axios
.post("api/v1/tasks/"+this.checkedTaskIDs+"/complete",
this.fieldsTaskDone
)
.then(response => {
alert("Task Done!");
})
.catch(error => {
console.log(error);
});
this.makeGetRequest();
},
async makeGetRequest() {
console.log("makeGetRequest begin ");
var fnRows = [];
await axios.get('api/v1/tasks', {
params: {
searchTermForDataTable: this.fieldsSearchTerm.searchTermForDataTable
}
})
.then((response) => {
this.rows = response.data;
fnRows = response.data;
console.log("inside axios > makeGetRequest" + JSON.stringify(this.rows));
});
this.searched = this.rows
console.log("makeGetRequest later " + this.searched);
},
async getAllUsers() {
console.log("table > getAllUsers begin ");
await axios.get('api/v1/getallusers')
.then((response) => {
this.allUsersUpdate = response.data;
});
console.log("table > outside axios user11" + this.allUsersUpdate);
},
submitUpdateForm() {
console.log(this.fieldsUpdate);
console.log(Cookies.get('token'));
axios
.put("api/v1/tasks/"+this.editing_record_id,
this.fieldsUpdate
)
.then(response => {
alert("Task Updated!");
//this.fields = {};
})
.catch(error => {
console.log(error);
});
this.makeGetRequest();
console.log("ppppnnnnnn");
},
async getTask() {
await axios.get('api/v1/tasks/'+this.editing_record_id)
.then((response) => {
this.fieldsUpdate.tasks_statusUpdate = response.data[0].tasks_status;
this.fieldsUpdate.nameUpdate = response.data[0].name;
this.fieldsUpdate.taskAssignedToUserUpdate = response.data[0].user_id;
this.fieldsUpdate.priorityUpdate = response.data[0].priority;
this.fieldsUpdate.task_descriptionUpdate = response.data[0].task_description;
if(response.data[0].due_date !== null)
{
this.fieldsUpdate.dueDateUpdate = response.data[0].due_date;
}
console.log("getTask With Join" + JSON.stringify(response.data[0]));
});
console.log("getTask With Join" + JSON.stringify(this.fieldsUpdate));
},
showUpdateModal(id) {
this.editing_record_id = id;
this.getTask();
this.$bvModal.show('taskUpdateModal')
},
softDeleteTask(id) {
if(confirm("Are you sure, you want to delete, this task?")){
axios
.delete("api/v1/tasks/"+id)
.then(response => {
alert("Task Deleted!");
//this.fields = {};
})
.catch(error => {
console.log(error);
});
this.makeGetRequest();
}
},
async getTaskForView() {
await axios.get('api/v1/tasks/'+this.view_record_id)
.then((response) => {
this.fieldsView.tasks_statusView = response.data[0].tasks_status;
this.fieldsView.nameView = response.data[0].name;
this.fieldsView.taskAssignedToUserView = response.data[0].user_id;
this.fieldsView.priorityView = response.data[0].priority;
this.fieldsView.task_descriptionView = response.data[0].task_description;
this.fieldsView.dueDateView = response.data[0].due_date;
this.fieldsView.userNameView = response.data[0].userName;
});
console.log("getTask" + JSON.stringify(this.fieldsView));
},
showViewModal(id) {
this.view_record_id = id;
this.getTaskForView();
this.$bvModal.show('taskViewModal')
},
},
created () {
console.log("inside created()1");
this.makeGetRequest();
this.getAllUsers();
console.log("outside axios" + this.rows);
enter code here
console.log("inside created() 2");
},
mounted() {
console.log("inside mounted()")
},
}
Can Anybody suggests a way to get valid JSON from controller and display it with correct loops in vue.js page. Thanks in advance.
I think you should use something like this in your Laravel controller, and then it would be easier to use loop to output json
$tasks = Task::select('tasks_status', DB::raw("group_concat(CONCAT('{\"id\":\"',id,'\",\"name\":\"',name,'\"}') ) as subrow"))
->where('tasks_status', '<>', "Sent Tasks")
->whereNull('user_id')
->orderBy('id', 'desc')
->groupBy('tasks_status')
->get()->map(function ($e) {
$e->subrow = json_decode($e->subrow);
return $e;
});
I’m following the tutorial at Workflow Builder Steps from Apps:
https://api.slack.com/tutorials/workflow-builder-steps
Glitch template:
https://glitch.com/edit/#!/steps-from-apps
I'm not able to verify the Redirect URL in Slack which I think is because I'm seeing a server-side error on glitch.com immediately after remixing the code.
Error message:
ReferenceError: require is not defined
file:///app/index.js:1
const { App, WorkflowStep } = require("#slack/bolt");
ReferenceError: require is not defined
Jump Toat file:///app/index.js:1:31
at ModuleJob.run (internal/modules/esm/module_job.js:152:23)
at async Loader.import (internal/modules/esm/loader.js:166:24)
at async Object.loadESM (internal/process/esm_loader.js:68:5)
Glitch:
https://glitch.com/edit/#!/tarry-tremendous-walnut
Any ideas what’s going on?
Thanks!
Rick
index.js:
const { App, WorkflowStep } = require("#slack/bolt");
const app = new App({
token: process.env.SLACK_BOT_TOKEN,
signingSecret: process.env.SLACK_SIGNING_SECRET
});
// This code saves tasks to this object
// Tasks are stored in memory and not in a persistent database
// This object is refreshed each time your Glitch app restarts
// The result is that your App Home will be cleared with each restart
let TASKS_DB = {};
const ws = new WorkflowStep("copy_review", {
edit: async ({ ack, step, configure }) => {
await ack();
const blocks = [
{
type: "section",
block_id: "intro-section",
text: {
type: "plain_text",
text:
"Create a task in one of the listed projects. The link to the task and other details will be available as variable data in later steps.",
emoji: true
}
},
{
type: "input",
block_id: "task_name_input",
element: {
type: "plain_text_input",
action_id: "name",
placeholder: {
type: "plain_text",
text: "Write a task name"
}
},
label: {
type: "plain_text",
text: "Task name",
emoji: true
}
},
{
type: "input",
block_id: "task_description_input",
element: {
type: "plain_text_input",
action_id: "description",
placeholder: {
type: "plain_text",
text: "Write a description for your task"
}
},
label: {
type: "plain_text",
text: "Task description",
emoji: true
}
},
{
type: "input",
block_id: "task_author_input",
element: {
type: "plain_text_input",
action_id: "author",
placeholder: {
type: "plain_text",
text: "Write a task name"
}
},
label: {
type: "plain_text",
text: "Task author",
emoji: true
}
}
];
await configure({ blocks });
},
save: async ({ ack, step, update, view }) => {
await ack();
const {
task_name_input,
task_description_input,
task_author_input
} = view.state.values;
const taskName = task_name_input.name.value;
const taskDescription = task_description_input.description.value;
const taskAuthorEmail = task_author_input.author.value;
const inputs = {
taskName: { value: taskName },
taskDescription: { value: taskDescription },
taskAuthorEmail: { value: taskAuthorEmail }
};
const outputs = [
{
type: "text",
name: "taskName",
label: "Task Name"
},
{
type: "text",
name: "taskDescription",
label: "Task Description"
},
{
type: "text",
name: "taskAuthorEmail",
label: "Task Author Email"
}
];
await update({ inputs, outputs });
},
execute: async ({ step, complete, fail, client }) => {
try {
const { taskName, taskDescription, taskAuthorEmail } = step.inputs;
const outputs = {
taskName: taskName.value,
taskDescription: taskDescription.value,
taskAuthorEmail: taskAuthorEmail.value
};
const user = await client.users.lookupByEmail({
email: taskAuthorEmail.value
});
const userId = user.user.id;
const newTask = {
task_name: taskName.value,
task_description: taskDescription.value
};
TASKS_DB[userId] = TASKS_DB[userId]
? [...TASKS_DB[userId], newTask]
: [newTask];
const taskBlocksItems = TASKS_DB[userId].map(task => {
return [
{
type: "section",
text: {
type: "plain_text",
text: task.task_name,
emoji: true
}
},
{
type: "divider"
}
];
});
const homeHeader = [
{
type: "header",
text: {
type: "plain_text",
text: "Workflow Builder - Steps from Apps task list",
emoji: true
}
},
{
type: "context",
elements: [
{
type: "mrkdwn",
text:
"_This is a list of tasks generated by your example Workflow Builder Task creation step, found in this tutorial https://api.slack.com/tutorials/workflow-builder-steps. These tasks are stored in the Glitch client, not in a database and refresh every time your Glitch app is restarted. If you'd like to store these tasks in a database, please check out this Glitch page for more information https://glitch.com/#storage _"
}
]
},
{
type: "divider"
}
];
const taskBlocks = [].concat.apply([], taskBlocksItems);
const blocks = homeHeader.concat(taskBlocks);
// update app home
let view = {
type: "home",
blocks
};
const usersTasks = TASKS_DB[userId];
await client.views.publish({
user_id: userId,
view: JSON.stringify(view)
});
// If everything was successful, complete the step
await complete({ outputs });
} catch (e) {
// TODO if something went wrong, fail the step ...
app.logger.error("Error completing step", e.message);
}
}
});
app.step(ws);
(async () => {
// Start your app
const port = process.env.PORT || 3000;
await app.start(port);
console.log(`⚡️ index.js Bolt app is running on port ${port}!`);
})();
Your package.json config has "type": "module" and, according to the original template you're working from, you do not want to be building this script as a module. If you remove that declaration, using require will work.
I have two TreeViews, one has a list of countries, and the other is empty, now I want drag and drop selected countries into the second tree-view. I don't know how to send data to the controller from the TreeView and there is also some text field on the page in a form. So, how can I send both the form data and the TreeView's data to the controller.
Here is the code for the second tree-view which is empty and I want to add the selected nodes to:
#(Html.Kendo().TreeView()
.Name("treeview-right")
.DragAndDrop(true)
.Events(events => events
.Drag("onDrag")
.Drop("onDrop")
)
)
Please try with the below code snippet.
HTML/VIEW
<div style="border: 1px solid green;">
<div id="treeview-left"></div>
</div>
<div style="border: 1px solid red;">
<div id="treeview-right"></div>
</div>
<div id="mydiv" onclick="SaveData()">Click me to save data</div>
<script>
$("#treeview-left").kendoTreeView({
dragAndDrop: true,
dataSource: [
{
id: 11, text: "Furniture", expanded: true, items: [
{ id: 12, text: "Tables & Chairs" },
{ id: 13, text: "Sofas" },
{ id: 14, text: "Occasional Furniture" }
]
},
{
id: 15, text: "Decor", items: [
{ id: 16, text: "Bed Linen" },
{ id: 17, text: "Curtains & Blinds" },
{ id: 18, text: "Carpets" }
]
}
]
});
$("#treeview-right").kendoTreeView({
dragAndDrop: true,
dataSource: [
{
id: 1, text: "Storage", expanded: true, items: [
{ id: 2, text: "Wall Shelving" },
{ id: 3, text: "Floor Shelving" },
{ id: 4, text: "Kids Storage" }
]
},
{
id: 5, text: "Lights", items: [
{ id: 6, text: "Ceiling" },
{ id: 7, text: "Table" },
{ id: 8, text: "Floor" }
]
}
]
});
var selectedID;
function SaveData() {
selectedID = '';
var tv = $("#treeview-right").data("kendoTreeView");
selectedID = getRecursiveNodeText(tv.dataSource.view());
alert(selectedID);
var data = {};
data.str = selectedID;
$.ajax({
url: 'Home/SaveData',
type: 'POST',
data: data,
dataType: 'json',
success: function (result) {
alert("Success");
},
error: function (result) {
alert("Error");
},
});
}
function getRecursiveNodeText(nodeview) {
for (var i = 0; i < nodeview.length; i++) {
selectedID += nodeview[i].id + ",";
//nodeview[i].text; You can also access text here
if (nodeview[i].hasChildren) {
getRecursiveNodeText(nodeview[i].children.view());
}
}
return selectedID;
}
</script>
CONTROLLER
namespace MvcApplication2.Controllers
{
public class HomeController : Controller
{
[HttpPost]
public JsonResult SaveData(string str)
{
foreach (string s in str.Split(','))
{
if (!string.IsNullOrEmpty(s))
{
//Perform your opeartion here
}
}
return Json("");
}
}
}
jsfiddle Demo
I'm using kendoTabStrip as is shown on KendoUI Page. In my case in each div I have rendered partial view. In a few of my partial views I have additionaly kendoGrid.
Problem
When I reload page in any tab and go to tab which contain kendoGrid then it do not work correctly. For example: I'm on tab#0 and go for tab#3 which contain kendoGrid with pagination, then pagination is not display. But when I reload it then pagination works fine.
What can I do to my Grids works inside TabStrip?
Any help would be appreciated.
UPDATE
My implementation of tabstrip
$("#tabStrip").kendoTabStrip({
animation: { open: { effects: false} },
select: function (e) {
document.location.hash = 'tab-' + $(e.item).index();
}
});
var tabStrip = $('#tabStrip').data('kendoTabStrip');
var tabId = 0;
var scheduledId = 0;
if (document.location.hash.match(/tab-/) == 'tab-') {
tabId = document.location.hash.substr(5);
}
if (document.location.hash.match(/scheduled-/) == 'scheduled-') {
tabId = 1;
scheduledId = document.location.hash.substr(11);
editSchedule('/admin/Course/Scheduled/' + scheduledId + '/Edit/' );
}
tabStrip.select(tabStrip.tabGroup.children('li').eq(tabId));
So I need it to make some rewrites from controller.
To fix this problem we must change :
$("#tabStrip").kendoTabStrip({
animation: { open: { effects: false} },
select: function (e) {
document.location.hash = 'tab-' + $(e.item).index();
}
});
for:
$("#tabStrip").kendoTabStrip({
animation: { open: { effects: false} },
select: function (e) {
document.location.hash = 'tab-' + $(e.item).index();
},
activate: function(e) {
$(e.contentElement).find('.k-state-active [data-role="grid"]').each(function() {
$(this).data("kendoGrid").refresh();
});
}
});
Event activate is 'Triggered just after a tab is being made visible, but before the end of the animation'. So we must refresh our grids then becouse js counts widths of hidden elements wrong.
I put together an example of Grids working inside of a TabStrip: http://jsfiddle.net/dpeaep/SJ85S/. Maybe, I am missing part of what you are asking in your question. If so, you can modify the jsfiddle to clarify what the problem is.
HTML
<div id="tabstrip">
<ul>
<li>Grid 1</li>
<li>Grid 2</li>
<li>Grid 3</li>
</ul>
<div><div id="grid1"></div></div>
<div><div id="grid2"></div></div>
<div><div id="grid3"></div></div>
</div>
Javascript
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.select(0);
$("#grid1").kendoGrid({
columns: [
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" }
],
dataSource: {
data: [
{ FirstName: "Joe", LastName: "Smith" },
{ FirstName: "Jane", LastName: "Smith" }
]
}
});
$("#grid2").kendoGrid({
columns: [
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" }
],
dataSource: {
data: [
{ FirstName: "Betty", LastName: "Lakna" },
{ FirstName: "Fumitaka", LastName: "Yamamoto" },
{ FirstName: "Fred", LastName: "Stevenson" }
]
}
});
$("#grid3").kendoGrid({
columns: [
{ field: "Title", title: "Title" },
{ field: "Year", title: "Year" }
],
dataSource: {
data: [
{ Title: "Lost in Domtar", Year: "2012" },
{ Title: "Evergreen", Year: "2012" },
{ Title: "Fields of Yellow", Year: "2010" },
{ Title: "Where the Whistle Blows", Year: "2008" }
]
}
});
I need to load items (menu) via ajax but do not understand how...
trying to do like this:
var tb = Ext.create('Ext.toolbar.Toolbar', {
renderTo: 'top-menu',
autoLoad: {
url: '/index/tullbar',
renderer: 'component',
params: {
userId: 1
}
},
layout: {
overflowHandler: 'Menu'
}
});
});
response:
[
{
"text": "test",
"menu": {
"text": "asdf",
"handler":"handleAction.createDelegate(window)"
}
}
]
but handler is not working.
Can anybody give the working example.
I haven't used element loader before so I would make a wild guess that you should specify a renderer function according to http://docs.sencha.com/ext-js/4-0/#/api/-cfg-renderer:
var tb = Ext.create('Ext.toolbar.Toolbar', {
renderTo: 'top-menu',
autoLoad: {
url: '/index/tullbar',
renderer: function(loader, response) {
var menuItems = Ext.decode(response.responseText);
tb.items.add(menuItems);
},
params: {
userId: 1
}
},
layout: {
overflowHandler: 'Menu'
}
});