Adding checkbox in Django table - javascript

I am trying to create a checkbox table in Django that only allows the user to select only 1 value. The current code I have allows the user to select multiple checkboxes. May I know how do I disable that?
Also, how do I get the data for the selected rows in the table using javascript that is supposed to be passed into a function in views.py?
<doctor.html>
{% block mainbody %}
{% verbatim %}
<div id="app2" class="container">
<div class="emr-table">
<el-table
:data="list"
stripe
style="width: 100%">
<el-table-column :resizable="false" min-width="10px" :render-header="renderHeader" align="center">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.itemCheck"
#change="toggleCheck(scope.row)" max=1></el-checkbox>
</template>
</el-table-column>
<el-table-column
prop="id"
label="Index"
width="120">
</el-table-column>
<el-table-column
prop="patient_id"
label="Patient ID"
width="230">
</el-table-column>
<el-table-column
prop="ward_number"
label="Ward No."
width="130">
</el-table-column>
<el-table-column
prop="medication"
label="Medications">
</el-table-column>
<el-table-column
prop="date_assigned"
label="Date Assigned"
width="160">
</el-table-column>
<el-table-column
prop="time_assigned"
label="Time Assigned"
width="160">
</el-table-column>
</el-table>
</div>
<div class="filter-container">
<div class="filter-item">
<el-button #click="onAddMedicine">Add</el-button>
</div>
</div>
</div>
{% endverbatim %}
<script>
new Vue({
el: '#app2',
data() {
return {
list: []
}
},
mounted() {
this.getemrList()
},
methods: {
getemrList() {
// Obtain EMR list
axios.post(ToDJ('emrList'), new URLSearchParams()).then(res => {
if (res.data.code === 0) {
console.log(res.data.data)
this.list = res.data.data
} else {
this.NotifyFail(res.data.data)
}
})
},
// Success notification
NotifySuc(str) {
this.$message({
message: str,
type: 'success'
})
},
// Error notification
NotifyFail(str) {
this.$message({
message: str,
type: 'warning'
})
}
}
})
</script>
{% endblock %}
Output that I obtain:
I am new to web development. Would appreciate any advice. Thank you!

Related

How to access data from a loop in a vuetify carousel?

I use vuetify to make a kind of carousel to display recipes that are stored in the database.
But I would like when I click on a recipe the carousel opens below a space with all the elements of the recipe in question (the one we clicked on) So I found a component on vuetify that corresponds exactly to what I'm looking for: Here is Vuetify Carousel
But in my v-slide-item I use a loop that retrieves the recipe data but suddenly from the v-expand-transition I no longer have access to this loop how can I display the recipe data suddenly?
Here is the code :
<template>
<v-sheet
class="mx-auto"
elevation="8"
max-width="100%"
style="box-shadow: none !important;"
>
<v-slide-group
v-model="model"
class="pa-4 slider"
show-arrows
>
<v-slide-item
v-for="n in Object.keys(recipes)"
:key="recipes[n].id"
v-slot="{ active, toggle }"
>
<v-card
:color=" 'grey lighten-1'"
class="ma-4 card-recipe"
height="200"
width="200"
style="border-radius: 10px;"
v-bind:style="recipes[n].recipe[0].first_recipes_image != null ? { backgroundImage: 'url(' + recipes[n].recipe[0].first_recipes_image + ')' } : { backgroundImage: 'url(https://cdn.vuetifyjs.com/images/cards/sunshine.jpg)' }"
#click="toggle"
>
<p class="card-text" ><span class="black--text">{{ recipes[n].recipe[0].name }}</span></p>
<v-row
class="fill-height"
align="center"
justify="center"
>
<v-scale-transition>
<v-icon
v-if="active"
color="white"
size="48"
v-text="'mdi-close-circle-outline'"
></v-icon>
</v-scale-transition>
</v-row>
</v-card>
</v-slide-item>
</v-slide-group>
<v-expand-transition>
<v-sheet
v-if="model != null"
height="200"
tile
style="background-color: #FFF8F0 !important;"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<h3 class="text-h6">
Selected {{ model }}
</h3>
</v-row>
</v-sheet>
</v-expand-transition>
</v-sheet>
</template>
<script>
import { mapGetters } from "vuex";
export default {
props: {
},
data: () => ({
model: null,
recipes: [],
openedCards: [],
}),
computed: {
console: () => console,
...mapGetters({
plantActive: 'permatheque/getPlant',
}),
},
methods: {
async getPlantRecipes() {
this.$axios
.$get("/lnk/plant/recipes?plant_id=" + this.plantActive.id + "")
.then((response) => {
this.recipes = response;
console.log(this.recipes);
})
.catch((error) => {
console.log(error);
});
},
},
mounted() {
this.getPlantRecipes()
}
}
</script>
Hope I was clear enough, thanks!
You can use the v-model of the v-slide-group which is basically the index from recipes array of the selected item in the carousel.
This way you know which recipe is selected, so you can go grab the recipe info from the array or make another api call to get that info.
Example
Check this codesandbox I made: https://codesandbox.io/s/stack-71474788-recipes-carousel-6vm97o?file=/src/components/Example.vue
If you already have the recipe info within your recipes array, all you need to do is use the v-model variable of the v-slide-group which I renamed to recipeIndex to access that data directly from your array.
<v-expand-transition>
<v-sheet v-if="recipeIndex != null" tile style="background-color: #FFF3E0 !important;">
<v-container fluid class="pa-12">
<v-row>
<v-col cols="12" sm="6">
<span class="text-h6">{{ `${recipes[recipeIndex].name}'s Recipe` }}</span> <br>
<span class="text-subtitle-1">{{ recipes[recipeIndex].description }}</span>
<p class="text-justify mt-4">
{{ recipes[recipeIndex].steps }}
</p>
</v-col>
<v-col cols="12" sm="6" class="d-flex align-center justify-center">
<div class="thumbnail">
<img :src="recipes[recipeIndex].image" alt="Beach Scene" style="width: 100%;" />
</div>
</v-col>
</v-row>
</v-container>
</v-sheet>
</v-expand-transition>
If you need to get the info from a secondary api call. You can set up a watcher on the recipeIndex variable to obtain the recipe info everytime it changes.

Vue.js - How to add an event after I dragged and changed the order of El_Table?

I am using element-ui-el-table-draggable to obtain the draggable effect.
My table is rendered by the following code, and can be dragged to change the order of the rows.
<p class="p-3" v-if="departmentlist">
<ElTableDraggable>
<el-table
stripe
class="table-responsive table"
header-row-class-name="thead-light"
:data="departmentlist"
#row-click="row_clicked_event">
<!-- <el-table-column label="ID" prop="IDn">
<template v-slot="{ row }">
{{ row.IDn }}
</template>
</el-table-column> -->
<el-table-column label="PLU" prop="PLU" :key="PLU"> </el-table-column>
<el-table-column :label="$t('Name') + '1'" prop="Name1" :key="$t('Name') + '1'">
</el-table-column>
<el-table-column :label="$t('Name') + '2'" prop="Name2" :key="$t('Name') + '2'">
</el-table-column>
<el-table-column :label="$t('Sort Order')" prop="SortOrder" :key="$t('Sort Order')">
</el-table-column>
<el-table-column :label="$t('Remarks')" prop="Remarks" :key="$t('Remarks')">
</el-table-column>
</el-table>
</ElTableDraggable>
</p>
<p class="p-3" v-else>
{{ $t("No Records") }}
</p>
However, every time the page is refreshed, the order will revert to its original state. This is because the 'Sort Order' has never been changed after I dragged and moved a row.
What can be done so that every time when a row is moved, I can call a method?

Vue Js Element UI how to render array object in table column

For my Vue Js Element UI code, I want to display/traverse the array data in el-table-column but it's not rendering. String data is showing correctly only issue with the array. I have tried by putting the static data in data() return method also but it's not working for me. Please check below code what I have tried,
HTML
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="module" label="Module">
</el-table-column>
<el-table-column prop="status" label="Status">
</el-table-column>
<el-table-column prop="downloadfiles" label="Download Files"
v-for="(download,index) in tableData[0].downloadfiles[0]">
<el-table-column label="File" :prop="download.file"></el-table-column>
<el-table-column label="Path" :prop="JSON.stringify({download, property:'path'})"></el-table-column>
</el-table-column>
</el-table>
Script
data () {
return {
tableData: [{
"module": 'Order',
"status": "Ok",
"downloadfiles":
[{
"file": "test_20210406080352.zip",
"path": "/opt/var/log/download/"
},
{
"file": "New_20210406080352.zip",
"path": "/opt/var/log/download/"
}]
}],
}
}
I have tried to parse download node data in 2 ways but both the solution not working for me. Please help me how to traverse the array object in el-table-column.
You are selecting first item in downloadfiles array here tableData[0].downloadfiles[0] and you shouldn't.
It works like this:
<el-table-column
prop="downloadfiles"
label="Download Files"
v-for="(d, i) in tableData[0].downloadfiles"
:key="i"
>
<el-table-column label="File">
{{ d.file }}
</el-table-column>
<el-table-column label="Path">
{{ d.path }}
</el-table-column>
</el-table-column>
Full example here
If you don't need to use subcolumns then solution would be to use scoped slot in table column.
For example:
<el-table-column label="Download Files">
<template slot-scope="props">
<div
v-for="(f, i) in props.row.downloadfiles"
:key="i"
>
<el-link
:href="f.path + f.file"
icon="el-icon-download"
type="primary"
>
{{f.file}}
</el-link>
</div>
</template>
</el-table-column>
Full example here

How to filter the table with Vue/Element-UI

I am using Vue in combination with Element UI and I would like to show only elements in my table, which have the status 0.
I get my data by using Express, Axios, which looks like that:
axios.get('http://127.0.0.1:8000/api/tools')
.then(response => {
console.log(response);
this.tools = response.data;
console.log(JSON.stringify(this.tools));
})
.catch((error) => {
console.log(error);
})
}
So everything works fine. I get all of my stuff listed but I wanted to have tabs, with different groups of items.
Because of that I can't filter it directly where I make the database access.
So I tought why not filter it directly in the tables.
So currently the header of my table looks like this:
<el-table
:data="tools.filter(data => !search || data.tool_name.toLowerCase().includes(search.toLowerCase()) || data.status == 0)"
border
fit
highlight-current-row>
And there you can see that I am already using a filter for my search bar.
I got it from the example in the Doc.
But I really have no idea how I can filter that I only get those elements, which "status" is == 0.
So I addet " || data.status == 0".
My columns looks like that:
<el-table-column align="center" label="Number" width="95">
<template slot-scope="scope">
{{ scope.row.tool_id }}
</template>
</el-table-column>
I hope someone have an idea!
Here the whole Table for better understanding:
<el-tab-pane label="Verfügbare Werkzeuge">
<el-input
placeholder="Werkzeug suchen..."
v-model="search"
class="search-form">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<el-table
:data="tools.filter(data => !search || data.tool_name.toLowerCase().includes(search.toLowerCase()) || data.status == 0)"
border
fit
highlight-current-row>
<el-table-column align="center" label="Werkzeugnummer" width="95">
<template slot-scope="scope">
{{ scope.row.tool_id }}
</template>
</el-table-column>
<el-table-column label="Bezeichnung" width="120">
<template slot-scope="scope">
{{ scope.row.tool_name }}
</template>
</el-table-column>
<el-table-column class-name="status-col" label="Status" width="110" align="center">
<template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter">{{ scope.row.status | nameFilter }}</el-tag>
</template>
</el-table-column>
<el-table-column label="letzter Verantwortlicher" width="120">
<template slot-scope="scope">
{{ scope.row.used_by }}
</template>
</el-table-column>
<el-table-column align="center" prop="actual_return_time" label="letzte Rückgabe" width="150">
<template slot-scope="scope">
<i class="el-icon-time"/>
<span>{{ scope.row.actual_return_time }}</span>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
It looks like a problem in your filter logic. Maybe you want use your data.status == 0 logic clause with && binary operator
Edit: pay attention on using parentheses in your logic. Besides that, you could use === to test equality including the type

How can I get an element to appear directly when I expand a row using Vue

I am an extreme beginner to Vue and am trying to to create a data table that when you click a row it expands and shows charts. With this I'm having two issues if you can help me out. When I click on a row nothing appears but then when I click on another one, graphs appear in the first. The second is that I would like to only have one row open at a time.
Thanks in advance!
<div class="right-side-table">
<el-table :data="" style="width: 100%; max-height: 100%" element-loading-text="" highlight-current-row empty-text="N/A" #expand="handleRowExpansion">
<el-table-column type="expand">
<template scope="props">
<p>#: {{ props.row.dateUTC }}</p>
<p>#: {{ props.row.creator }}</p>
<p>#: {{props.row.type }}</p>
<p>#: {{ props.row.labels }}</p>
<p>#: {{ props.row.uid }}</p>
<canvas id="myChart4" width="300" height="300"></canvas>
<canvas id="myChart6" width="300" height="300"></canvas>
<canvas id="myChart5" width="300" height="300"></canvas>
<div>
<el-button type="primary" #click="">Review</el-button>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="Name" sortable show-overflow-tooltip></el-table-column>
<el-table-column prop="" label="" sortable show-overflow-tooltip></el-table-column>
<el-table-column prop="" label="" sortable show-overflow-tooltip></el-table-column>
<el-table-column prop="" label="" sortable show-overflow-tooltip></el-table-column>
<el-table-column prop="" label="" sortable show-overflow-tooltip></el-table-column>
</el-table>
</div>
I played with element-ui for a little bit and managed to make it work:
new Vue({
el: "#app",
data() {
return {
tableData: [{
key: 1,
date: '2016-05-03',
address: 'No. 189, Grove St, Los Angeles'
}, {
key: 2,
date: '2016-05-02',
address: 'No. 189, Grove St, Los Angeles'
}, {
key: 3,
date: '2016-05-04',
address: 'No. 189, Grove St, Los Angeles'
}],
}
},
methods: {
expand(row, isExpanded) {
this.$refs.tab.store.states.expandRows = isExpanded ? [row] : []
}
}
})
<script src="https://vuejs.org/js/vue.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-table ref="tab" :data="tableData" #expand="expand">
<el-table-column type="expand">
<template scope="props">
<p>Address: {{ props.row.address}}</p>
</template>
</el-table-column>
<el-table-column prop="date" label="Date"></el-table-column>
</el-table>
</div>
Please mind though, that manipulating internal store state surely isn't recommended and perhaps not supported, but it works :)

Categories

Resources