By continuing you indicate that you have read and agree to our Terms of service and Privacy policy
by SortableJS JavaScript Version: 1.10.2 License: MIT
by SortableJS JavaScript Version: 1.10.2 License: MIT
Support
Quality
Security
License
Reuse
kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample Here
Get all kandi verified functions for this library.
Get all kandi verified functions for this library.
Supports touch devices and modern browsers (including IE9)
Can drag from one list to another or within the same list
CSS animation when moving items
Supports drag handles and selectable text (better than voidberg's html5sortable)
Smart auto-scrolling
Advanced swap detection
Smooth animations
Multi-drag support
Support for CSS transforms
Built using native HTML5 drag and drop API
Supports
Supports any CSS library, e.g. Bootstrap
Simple API
Support for plugins
CDN
No jQuery required (but there is support)
TypeScript definitions via @types/sortablejs
QUESTION
Reorder and preserve php array based on given keys
Asked 2022-Mar-29 at 12:47wondering if it's possible to reorder a php array based on given keys, currently I have an array that looks like this:
array:4 [▼
0 => array:3 [▼
"to" => "test"
"name" => "name"
"type" => "custom"
]
1 => array:4 [▼
"to" => "test 2"
"name" => "name 2"
"type" => "page"
"target" => "test"
]
2 => array:4 [▼
"to" => "my link"
"name" => "something"
"type" => "custom"
"target" => "_blank"
]
3 => array:4 [▼
"to" => "https://github.com/"
"name" => "github"
"type" => "custom"
"target" => "_parent"
]
]
On the frontend I'm using sortableJs to allow users to reorder the items to their liking, when the onSort
event is fired I collect all of the ids inside of the sortable
container and send it to the php function.
the data that sortable send looks like this
array:4 [▼
0 => "0"
1 => "2"
2 => "1"
3 => "3"
]
Where the value is the order that they're supposed to be in, so based on this data the original array would need to be this
array:4 [▼
0 => array:3 [▼
"to" => "test"
"name" => "name"
"type" => "custom"
]
2 => array:4 [▼
"to" => "my link"
"name" => "something"
"type" => "custom"
"target" => "_blank"
]
1 => array:4 [▼
"to" => "test 2"
"name" => "name 2"
"type" => "page"
"target" => "test"
]
3 => array:4 [▼
"to" => "https://github.com/"
"name" => "github"
"type" => "custom"
"target" => "_parent"
]
]
I've been thinking about this but can't seem to figure it out.
ANSWER
Answered 2022-Mar-29 at 12:43Oh, I love these! My solution would be
$sorted_array = array_map(
function($index) use ($original_array){
return $original_array[$index];
},
$sort_order
);
Where $original_array
is your original array and $sort_order
is the data that sortable sends.
EDIT: This only shuffles the values around, it does not conserve the keys. Your array is not an associative array, and your keys are not in fact keys but indices, and will always be displayed in order.
QUESTION
how to get vue draggable moved item
Asked 2022-Mar-27 at 18:52I am using this to implement drag-drop in my vue app. Lets my array is:
lists: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
]
I want to get the element object from the list after finishing the drop event. For example, I am moving the Item 1
item. After finishing the drag-drop, I want to get the print of which item has been moved. So, I want to get the output:
{ id: 1, name: 'Item 1' }
To get that, I have used @end
:
<draggable
class="list-group"
ghost-class="moving-card"
:list="lists"
group="my-group"
@end="finish($event, lists)"
>
And at finish
function, I would like to get the desired output: { id: 1, name: 'Item 1' }
from my <v-list v-for="list in lists"></v-list>
. So, what to do at this function?
finish (evt, draggedList) {
// console.log('finished')
// desired output (if item 1 has been moved):
// { id: 1, name: 'Item 1' }
}
ANSWER
Answered 2022-Mar-27 at 18:52Use @change="finish"
then change your method:
finish (item) {
console.log(item.moved.element) // { id: 1, name: 'Item 1' }
}
RTM: https://github.com/SortableJS/Vue.Draggable#events part which mentions change
event.
QUESTION
Vue.Draggable div items display left and right
Asked 2022-Mar-24 at 06:23I am new to Vue.js and for this project, I am using Vuedraggable to drag items. Currently, the items inside the draggabble div are displayed as
Text 1
Text 2
Text 3
Text 4
Is there a way we can change that and display as
Text 1 Text 2
Text 3 Text 4
JsFiddle Link = https://jsfiddle.net/ujjumaki/y1xw95rc/41/
View
<div id="app">
<div>
<draggable id="first" data-source="juju" :list="todos" class="list-group" draggable=".item">
<div class="list-group-item item" v-for="(element, index) in todos" :key="index" style="border-style: outset;
margin-top:0.5%; width: 10%; border-color:#17a2b8; border-width:thin;">
<p>
{{element.text}} id {{element.id}}
</p>
</div>
</draggable>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
Method
new Vue({
el: "#app",
data: {
todos: [
{ text: "Text 1", id: "1" },
{ text: "Text 2", id: "2" },
{ text: "Text 3", id: "3"},
{ text: "Text 4", id: "4" }
]
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})
ANSWER
Answered 2021-Aug-31 at 20:48Try to add following css:
#first {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
text-align: center;
}
.list-group-item {
width: 100% !important;
}
QUESTION
sortablejs not working within SharePoint (webpart)
Asked 2022-Mar-13 at 08:42I have an application where items can be dragged and dropped between two lists. For this I use react-sortablejs (which uses sortablejs).
When I start my React application normally (in dev mode or deployed standalone) the drag and drop works as desired.
However, as soon as I embed the application in a SharePoint page (using webpart), the drag and drop feature starts to go haywire: the first drop works as desired, but all subsequent drops of the same item result in strange behavior, primarily duplication of the item.
After some debugging, it looks to me like the item remains in the old list and therefore an error occurs when the item is "pushed back" or a duplicate occurs because another item is pushed into the same list.
I therefore don't think that this is a problem of the library itself (also because I haven't found any similar error messages about this), but that it has something to do with SharePoint. I noticed in another context that classic context menus with absolute positioning also cause problems because event.pageX and event.pageY contain different values.
Anyway, at the moment I have no clue to get to the bottom of this problem, so I'm hoping that anyone might have had similar experiences before. Maybe this ticket will help someone else who runs into similar problems in the future.
ANSWER
Answered 2022-Mar-13 at 08:42My problem went away after setting forceFallack
to true
QUESTION
NPM - why do I get EBADEGINE errors while I meet versions requirements installing reactjs dependancies on docker (buster)?
Asked 2022-Jan-26 at 14:08Trying to run this on docker, but I get EBADENGINE unsupported engine warning (and subsquent build fail, which I assume are related at least somewhat).
Docker command (from cloned project root with package.json file):
$ docker build --force-rm -t crmui:dev .
....
Step 6/9 : RUN npm install --legacy-peer-deps
---> Running in 34978d87b4eb
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@casl/react@2.1.1',
npm WARN EBADENGINE required: { npm: '^6.0.0' },
npm WARN EBADENGINE current: { node: 'v17.3.0', npm: '8.3.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: 'availity-reactstrap-validation-safe@2.6.1',
npm WARN EBADENGINE required: { node: '>= 5.0.0', npm: '^3.0.0' },
npm WARN EBADENGINE current: { node: 'v17.3.0', npm: '8.3.0' }
npm WARN EBADENGINE }
npm is above the required version, and so is node.
The Dockerfile
:
FROM node:17.3-buster
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json ./
matter of preference
RUN npm install react-app-rewired -g
RUN npm install --legacy-peer-deps
# add app. the chmod avoids a user issue with docker & mkdir .chache; not a production-ready fix
COPY . ./
RUN mkdir node_modules/.cache && chmod -R 777 node_modules/.cache
# start app
CMD ["npm", "start"]
The package.json
file:
{
"name": "vuexy-react-admin-dashboard",
"version": "1.0.0",
"private": true,
"dependencies": {
"@casl/ability": "5.2.2",
"@casl/react": "2.1.1",
"@fullcalendar/core": "5.7.2",
"@fullcalendar/daygrid": "5.7.2",
"@fullcalendar/interaction": "5.7.2",
"@fullcalendar/list": "5.7.2",
"@fullcalendar/react": "5.7.0",
"@fullcalendar/timegrid": "5.7.2",
"@fullcalendar/timeline": "5.7.2",
"@hookform/resolvers": "1.3.4",
"@uppy/react": "1.10.8",
"animate.css": "4.1.1",
"apexcharts": "^3.29.0",
"availity-reactstrap-validation-safe": "2.6.1",
"axios": "^0.24.0",
"axios-mock-adapter": "1.19.0",
"babel-plugin-react-intl": "5.1.18",
"bootstrap": "4.5.2",
"bs-stepper": "1.7.0",
"chart.js": "2.9.4",
"chroma-js": "2.1.0",
"classnames": "2.2.6",
"cleave.js": "1.6.0",
"draft-js": "0.11.7",
"draftjs-to-html": "0.9.1",
"file-saver": "2.0.2",
"flatpickr": "4.6.3",
"history": "5.0.0",
"html-to-draftjs": "1.5.0",
"intl-messageformat": "7.8.4",
"jquery": "3.5.1",
"jsonwebtoken": "8.5.1",
"leaflet": "1.6.0",
"moment": "2.29.1",
"nouislider": "14.6.2",
"nouislider-react": "3.3.8",
"postcss-rtl": "1.5.0",
"prismjs": "^1.25.0",
"prop-types": "15.7.2",
"react": "17.0.1",
"react-apexcharts": "1.3.6",
"react-chartjs-2": "2.9.0",
"react-contexify": "5.0.0",
"react-copy-to-clipboard": "5.0.2",
"react-country-flag": "2.0.1",
"react-data-table-component": "6.11.2",
"react-dom": "17.0.1",
"react-draft-wysiwyg": "^1.14.7",
"react-feather": "~2.0.3",
"react-flatpickr": "3.9.1",
"react-hook-form": "6.15.1",
"react-intl": "3.11.0",
"react-leaflet": "3.1.0",
"react-paginate": "7.0.0",
"react-perfect-scrollbar": "1.5.5",
"react-player": "2.6.2",
"react-rating": "2.0.5",
"react-redux": "7.2.2",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.2",
"react-scroll-up": "1.3.7",
"react-select": "4.0.2",
"react-shepherd": "3.3.0",
"react-slidedown": "2.4.5",
"react-sortablejs": "6.0.0",
"react-toastify": "7.0.3",
"reactstrap": "8.6.0",
"recharts": "2.0.4",
"redux": "4.0.5",
"redux-debounced": "0.5.0",
"redux-thunk": "2.3.0",
"sass": "1.26.8",
"screenfull": "5.0.2",
"sortablejs": "1.12.0",
"styled-components": "5.1.1",
"sweetalert2": "10.14.0",
"sweetalert2-react-content": "3.0.1",
"swiper": "6.0.4",
"uppy": "1.21.2",
"webpack": "4.43.0",
"wnumb": "1.2.0",
"xlsx": "^0.17.3",
"yarn": "1.21.1",
"yup": "0.32.8"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject",
"lint": "eslint src/**/*.js src/**/*.jsx",
"lint:fix": "eslint src/**/*.js --fix"
},
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
"@types/sortablejs": "1.10.6",
"eslint": "7.8.0",
"eslint-plugin-import": "2.22.0",
"eslint-plugin-react": "7.20.6",
"node-sass": "^4.13.1",
"react-app-rewire-aliases": "^0.2.0",
"react-app-rewire-postcss": "^3.0.2",
"react-app-rewire-sass-rule": "^2.1.1",
"react-app-rewired": "^2.1.6",
"sass-loader": "^8.0.2"
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
]
}
This fails with: <... more warning....>
npm WARN deprecated @formatjs/intl-unified-numberformat@3.3.7: We have renamed the package to @formatjs/intl-numberformat
npm ERR! code 1
npm ERR! path /app/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /usr/local/bin/node /app/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! make: Entering directory '/app/node_modules/node-sass/build'
npm ERR! g++ '-DNODE_GYP_MODULE_NAME=libsass' '-DUSING_UV_SHARED=1' '-DUSING_V8_SHARED=1' '-DV8_DEPRECATION_WARNINGS=1' '-DV8_DEPRECATION_WARNINGS' '-DV8_IMMINENT_DEPRECATION_WARNINGS' '-D_GLIBCXX_USE_CXX11_ABI=1' '-D_LARGEFILE_SOURCE' '-D_FILE_OFFSET_BITS=64' '-D__STDC_FORMAT_MACROS' '-DOPENSSL_NO_PINSHARED' '-DOPENSSL_THREADS' '
<.... lots of similar stuff ... >
8_DEPRECATION_WARNINGS' '-DV8_IMMINENT_DEPRECATION_WARNINGS' '-D_GLIBCXX_USE_CXX11_ABI=1' '-D_LARGEFILE_SOURCE' '-D_FILE_OFFSET_BITS=64' '-D__STDC_FORMAT_MACROS' '-DOPENSSL_NO_PINSHARED' '-DOPENSSL_THREADS' '-DBUILDING_NODE_EXTENSION' -I/root/.node-gyp/17.3.0/include/node -I/root/.node-gyp/17.3.0/src -I/root/.node-gyp/17.3.0/deps/openssl/config -I/root/.node-gyp/17.3.0/deps/openssl/openssl/include -I/root/.node-gyp/17.3.0/deps/uv/include -I/root/.node-gyp/17.3.0/deps/zlib -I/root/.node-gyp/17.3.0/deps/v8/include -I../../nan -I../src/libsass/include -fPIC -pthread -Wall -Wextra -Wno-unused-parameter -m64 -O3 -fno-omit-frame-pointer -fno-rtti -fno-exceptions -std=gnu++17 -std=c++0x -MMD -MF ./Release/.deps/Release/obj.target/binding/src/binding.o.d.raw -c -o Release/obj.target/binding/src/binding.o ../src/binding.cpp
npm ERR! make: Leaving directory '/app/node_modules/node-sass/build'
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli '/usr/local/bin/node',
npm ERR! gyp verb cli '/app/node_modules/node-gyp/bin/node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@17.3.0 | linux | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` succeeded python2 /usr/bin/python2
npm ERR! gyp verb check python version `/usr/bin/python2 -c "import sys; print "2.7.16
npm ERR! gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j
npm ERR! gyp verb get node dir no --target version specified, falling back to host node version: 17.3.0
npm ERR! gyp verb command install [ '17.3.0' ]
npm ERR! gyp verb install input version string "17.3.0"
npm ERR! gyp verb install installing version: 17.3.0
npm ERR! gyp verb install --ensure was passed, so won't reinstall if already installed
npm ERR! gyp verb install version not already installed, continuing with install 17.3.0
npm ERR! gyp verb ensuring nodedir is created /root/.node-gyp/17.3.0
npm ERR! gyp verb created nodedir /root/.node-gyp
npm ERR! gyp http GET https://nodejs.org/download/release/v17.3.0/node-v17.3.0-headers.tar.gz
npm ERR! gyp http 200 https://nodejs.org/download/release/v17.3.0/node-v17.3.0-headers.tar.gz
npm ERR! gyp verb extracted file from tarball include/node/common.gypi
npm ERR! gyp verb extracted file from tarball include/node/config.gypi
<.... bunch for tarball errors ...>
pm ERR! gyp verb extracted file from tarball include/node/openssl/x509_no-asm.h
npm ERR! gyp verb extracted file from tarball include/node/zconf.h
npm ERR! gyp verb extracted file from tarball include/node/zlib.h
npm ERR! gyp verb tarball done parsing tarball
npm ERR! gyp verb check download content checksum, need to download `SHASUMS256.txt`...
npm ERR! gyp verb checksum url https://nodejs.org/download/release/v17.3.0/SHASUMS256.txt
npm ERR! gyp http GET https://nodejs.org/download/release/v17.3.0/SHASUMS256.txt
npm ERR! gyp http 200 https://nodejs.org/download/release/v17.3.0/SHASUMS256.txt
npm ERR! gyp verb checksum data {"node-v17.3.0-aix-ppc64.tar.gz":"5300264598a643445378a51bf1d62242281ae602045934bf6fcacf6f6ba3abda","node-v17.3.0-darwin-arm64.tar.gz":"b504ba3628337f7ac2c67d04bf30e56082942345aa1a50e0e464f51df6662ff3","node-v17.3.0-darwin-arm64.tar.xz":"8f19364dd1159ce4ae8cfb3414508ee9092b8d3cf428b13c0d2aec7ac406e1ba","node-v17.3.0-darwin-x64.tar.gz":"d4fa7d01c3b08cecdb71eee1da27a5e0e2d31bd25ad3bee1807df95811c2ce3f","node-v17.3.0-darwin-x64.tar.xz":"eb231bd4ad5950ccb5572fc4bb099266a634d6788559424976c8e9fb7fc320d6","node-v17.3.0-headers.tar.gz":"9cb2ac1e9a3e7df31269699e02dcc55069cd1f27fd0417650fb95acf8f3e7a22","node-v17.3.0-headers.tar.xz":"b5f1f5bdb2405e626448100aa50879f859288eee4651a496270fc4c4486b28fc","node-v17.3.0-linux-arm64.tar.gz":"6f236f47fc68fa535bd0f769d9e12767a6b5251875aea2632c227ca55d1ab7ae","node-v17.3.0-linux-arm64.tar.xz":"ad298da8144635a7ae470b973bddca4270e5a3e5cb919991c367b6e4ea5aa5a9","node-v17.3.0-linux-armv7l.tar.gz":"f92c17fc61af2a47a9b9e42b8e795abfbe18a1fa4e51de52d7362cae74ad487d","node-v17.3.0-linux-armv7l.tar.xz":"660e89b1cf388493a9c00e7720b4bfafa903db12d00481ddae9edf22e950b728","node-v17.3.0-linux-ppc64le.tar.gz":"7161e93479e3df1b18f2fb75b36ef75fd1cbdf2cc610262f510531ef731d0050","node-v17.3.0-linux-ppc64le.tar.xz":"810b3e203bc1d450e543f7c945a136acb7e2f16152839e6f8cf87b4f1ee8c3bb","node-v17.3.0-linux-s390x.tar.gz":"de1b0007f4d46e786f2583b7312e3262820e6535bc16b45da57de65a8472e824","node-v17.3.0-linux-s390x.tar.xz":"10f1da9e679232797e273ca15c6205b86b438eccfceb56f41951af63239cdf76","node-v17.3.0-linux-x64.tar.gz":"479fb0b4b6405fb7240376187e2823cf384635a4998bdbaddc3ea826b63c8c74","node-v17.3.0-linux-x64.tar.xz":"b54b4b7d0732f2dbad9c13f5b909411cde3cc9989bfdeb7557c400e4c93fe6ee","node-v17.3.0.pkg":"f960b616eace93d171a0d15e67c62116aa3c6100eb6266046774cc478487b9d9","node-v17.3.0.tar.gz":"2914a3f0dc02ec6046f81ff12e1fb1fcf2b346b6b50e2c944440fdd165efd3ff","node-v17.3.0.tar.xz":"e4e4c4e64854698f2590144a177bcc7e7c0befb52020288fdae5c0da0d015d03","node-v17.3.0-win-x64.7z":"8876df18c5327e495f6dc4e576c66885c85ec77438386921bc93589788178b18","node-v17.3.0-win-x64.zip":"a7a1d01ca796aa48f3690f1637bf4677dab81cd8608c082e325ebf575d5f832f","node-v17.3.0-win-x86.7z":"62c94ff583c9e2b267f839bd24893bb2a3ee090547658be003e0ba11047d593b","node-v17.3.0-win-x86.zip":"8e766aca83e5a7d01faeb57121f4af4963726b0e8a3f70ff3eeb51493c61ba96","node-v17.3.0-x64.msi":"a2480ad99c7d02a67c71cb462adbb4dad0a2c3884c7fea2ac2da543be18661a6","node-v17.3.0-x86.msi":"5b3b8acff16964add6b24c408060430edf7c2060408568e4286f7dc758cf8cb6","win-x64/node.exe":"9f0b2a11ed3a956a773f4072e40c05645445cbd100d71c30737656159f0e5e42","win-x64/node.lib":"281c2c43920b76ee23c32f110917b50b92977b15842dceada2ed84d7a29e8d34","win-x64/node_pdb.7z":"484ab403a7743cf8e2d04e8e1cc0e1b419e48b601402e01c248a386549c847d8","win-x64/node_pdb.zip":"074124c6ccbc5ceed67c0f7a4091d2e72fb236a6d1a27cb7aaca950e4215ccdc","win-x86/node.exe":"1e4d4bdc1855e032af72080e3390a19d637a85058b52f94d7918b33f0c8ad0db","win-x86/node.lib":"9d79fc5845cf0e8602ea59057639cf2b3731058eb9ada1b8c3bd52638732f4d7","win-x86/node_pdb.7z":"59680a579e30520af180b9ea543ab854b485e287520b7c7b01abef3b1085eb8f","win-x86/node_pdb.zip":"5b5a3f76e247c52c005757935f8360a7d4766134ff7fb858c858567b5785fee3"}
npm ERR! gyp verb download contents checksum {"node-v17.3.0-headers.tar.gz":"9cb2ac1e9a3e7df31269699e02dcc55069cd1f27fd0417650fb95acf8f3e7a22"}
npm ERR! gyp verb validating download checksum for node-v17.3.0-headers.tar.gz (9cb2ac1e9a3e7df31269699e02dcc55069cd1f27fd0417650fb95acf8f3e7a22 == 9cb2ac1e9a3e7df31269699e02dcc55069cd1f27fd0417650fb95acf8f3e7a22)
npm ERR! gyp verb get node dir target node version installed: 17.3.0
npm ERR! gyp verb build dir attempting to create "build" dir: /app/node_modules/node-sass/build
npm ERR! gyp verb build dir "build" dir needed to be created? /app/node_modules/node-sass/build
npm ERR! gyp verb build/config.gypi creating config file
npm ERR! gyp verb build/config.gypi writing out config file: /app/node_modules/node-sass/build/config.gypi
npm ERR! (node:78) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
npm ERR! (Use `node --trace-deprecation ...` to show where the warning was created)
npm ERR! gyp verb config.gypi checking for gypi file: /app/node_modules/node-sass/config.gypi
npm ERR! gyp verb common.gypi checking for gypi file: /app/node_modules/node-sass/common.gypi
npm ERR! gyp verb gyp gyp format was not specified; forcing "make"
npm ERR! gyp info spawn /usr/bin/python2
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args '/app/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args 'binding.gyp',
npm ERR! gyp info spawn args '-f',
npm ERR! gyp info spawn args 'make',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/app/node_modules/node-sass/build/config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/app/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/root/.node-gyp/17.3.0/include/node/common.gypi',
npm ERR! gyp info spawn args '-Dlibrary=shared_library',
npm ERR! gyp info spawn args '-Dvisibility=default',
npm ERR! gyp info spawn args '-Dnode_root_dir=/root/.node-gyp/17.3.0',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=/app/node_modules/node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=/root/.node-gyp/17.3.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=/app/node_modules/node-sass',
npm ERR! gyp info spawn args '-Dnode_engine=v8',
npm ERR! gyp info spawn args '--depth=.',
npm ERR! gyp info spawn args '--no-parallel',
npm ERR! gyp info spawn args '--generator-output',
npm ERR! gyp info spawn args 'build',
npm ERR! gyp info spawn args '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp verb command build []
npm ERR! gyp verb build type Release
npm ERR! gyp verb architecture x64
npm ERR! gyp verb node dev dir /root/.node-gyp/17.3.0
npm ERR! gyp verb `which` succeeded for `make` /usr/bin/make
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'V=1', 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! ../src/libsass/src/cencode.c: In function 'base64_encode_block':
npm ERR! ../src/libsass/src/cencode.c:48:11: warning: this statement may fall through [-Wimplicit-fallthrough=]
npm ERR! result = (fragment & 0x003) << 4;
npm ERR! ~~~~~~~^~~~~~~~~~~~~~~~~~~~~~~~~
npm ERR! ../src/libsass/src/cencode.c:52:2: note: here
npm ERR! case step_B:
npm ERR! ^~~~
npm ERR! ../src/libsass/src/cencode.c:62:11: warning: this statement may fall through [-Wimplicit-fallthrough=]
npm ERR! result = (fragment & 0x00f) << 2;
npm ERR! ~~~~~~~^~~~~~~~~~~~~~~~~~~~~~~~~
npm ERR! ../src/libsass/src/cencode.c:66:2: note: here
npm ERR! case step_C:
npm ERR! ^~~~
npm ERR! ../src/libsass/src/functions.cpp: In function 'void Sass::Functions::handle_utf8_error(const Sass::ParserState&, Sass::Backtraces)':
npm ERR! ../src/libsass/src/functions.cpp:110:20: warning: catching polymorphic type 'class utf8::invalid_code_point' by value [-Wcatch-value=]
npm ERR! catch (utf8::invalid_code_point) {
npm ERR! ^~~~~~~~~~~~~~~~~~
npm ERR! ../src/libsass/src/functions.cpp:114:20: warning: catching polymorphic type 'class utf8::not_enough_room' by value [-Wcatch-value=]
npm ERR! catch (utf8::not_enough_room) {
npm ERR! ^~~~~~~~~~~~~~~
npm ERR! ../src/libsass/src/functions.cpp:118:20: warning: catching polymorphic type 'class utf8::invalid_utf8' by value [-Wcatch-value=]
npm ERR! catch (utf8::invalid_utf8) {
npm ERR! ^~~~~~~~~~~~
npm ERR! ../src/libsass/src/json.cpp: In function 'char* json_encode_string(const char*)':
npm ERR! ../src/libsass/src/json.cpp:405:15: warning: catching polymorphic type 'class std::exception' by value [-Wcatch-value=]
npm ERR! catch (std::exception) {
npm ERR! ^~~~~~~~~
npm ERR! ../src/libsass/src/json.cpp: In function 'char* json_stringify(const JsonNode*, const char*)':
npm ERR! ../src/libsass/src/json.cpp:424:15: warning: catching polymorphic type 'class std::exception' by value [-Wcatch-value=]
npm ERR! catch (std::exception) {
npm ERR! ^~~~~~~~~
npm ERR! In file included from /root/.node-gyp/17.3.0/include/node/v8-local-handle.h:12,
npm ERR! from /root/.node-gyp/17.3.0/include/node/v8-array-buffer.h:12,
npm ERR! from /root/.node-gyp/17.3.0/include/node/v8.h:25,
npm ERR! from /root/.node-gyp/17.3.0/include/node/node.h:63,
npm ERR! from ../../nan/nan.h:58,
npm ERR! from ../src/binding.cpp:1:
npm ERR! /root/.node-gyp/17.3.0/include/node/v8-internal.h: In function 'void v8::internal::PerformCastCheck(T*)':
npm ERR! /root/.node-gyp/17.3.0/include/node/v8-internal.h:563:38: error: 'remove_cv_t' is not a member of 'std'
npm ERR! !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR! ^~~~~~~~~~~
npm ERR! /root/.node-gyp/17.3.0/include/node/v8-internal.h:563:38: note: suggested alternative: 'remove_cv'
npm ERR! !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR! ^~~~~~~~~~~
npm ERR! remove_cv
npm ERR! /root/.node-gyp/17.3.0/include/node/v8-internal.h:563:38: error: 'remove_cv_t' is not a member of 'std'
npm ERR! /root/.node-gyp/17.3.0/include/node/v8-internal.h:563:38: note: suggested alternative: 'remove_cv'
npm ERR! !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR! ^~~~~~~~~~~
npm ERR! remove_cv
npm ERR! /root/.node-gyp/17.3.0/include/node/v8-internal.h:563:50: error: template argument 2 is invalid
npm ERR! !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR! ^
npm ERR! /root/.node-gyp/17.3.0/include/node/v8-internal.h:563:63: error: '::Perform' has not been declared
npm ERR! !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR! ^~~~~~~
npm ERR! /root/.node-gyp/17.3.0/include/node/v8-internal.h:563:63: note: suggested alternative: 'herror'
npm ERR! !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
npm ERR! ^~~~~~~
npm ERR! herror
npm ERR! ../src/binding.cpp: In function 'Nan::NAN_METHOD_RETURN_TYPE render(Nan::NAN_METHOD_ARGS_TYPE)':
npm ERR! ../src/binding.cpp:284:98: warning: cast between incompatible function types from 'void (*)(uv_work_t*)' {aka 'void (*)(uv_work_s*)'} to 'uv_after_work_cb' {aka 'void (*)(uv_work_s*, int)'} [-Wcast-function-type]
npm ERR! int status = uv_queue_work(uv_default_loop(), &ctx_w->request, compile_it, (uv_after_work_cb)MakeCallback);
npm ERR! ^~~~~~~~~~~~
npm ERR! ../src/binding.cpp: In function 'Nan::NAN_METHOD_RETURN_TYPE render_file(Nan::NAN_METHOD_ARGS_TYPE)':
npm ERR! ../src/binding.cpp:320:98: warning: cast between incompatible function types from 'void (*)(uv_work_t*)' {aka 'void (*)(uv_work_s*)'} to 'uv_after_work_cb' {aka 'void (*)(uv_work_s*, int)'} [-Wcast-function-type]
npm ERR! int status = uv_queue_work(uv_default_loop(), &ctx_w->request, compile_it, (uv_after_work_cb)MakeCallback);
npm ERR! ^~~~~~~~~~~~
npm ERR! In file included from ../../nan/nan.h:58,
npm ERR! from ../src/binding.cpp:1:
npm ERR! ../src/binding.cpp: At global scope:
npm ERR! /root/.node-gyp/17.3.0/include/node/node.h:843:43: warning: cast between incompatible function types from 'void (*)(Nan::ADDON_REGISTER_FUNCTION_ARGS_TYPE)' {aka 'void (*)(v8::Local<v8::Object>)'} to 'node::addon_register_func' {aka 'void (*)(v8::Local<v8::Object>, v8::Local<v8::Value>, void*)'} [-Wcast-function-type]
npm ERR! (node::addon_register_func) (regfunc), \
npm ERR! ^
npm ERR! /root/.node-gyp/17.3.0/include/node/node.h:877:3: note: in expansion of macro 'NODE_MODULE_X'
npm ERR! NODE_MODULE_X(modname, regfunc, NULL, 0) // NOLINT (readability/null_usage)
npm ERR! ^~~~~~~~~~~~~
npm ERR! ../src/binding.cpp:358:1: note: in expansion of macro 'NODE_MODULE'
npm ERR! NODE_MODULE(binding, RegisterModule);
npm ERR! ^~~~~~~~~~~
npm ERR! make: *** [binding.target.mk:133: Release/obj.target/binding/src/binding.o] Error 1
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack at ChildProcess.onExit (/app/node_modules/node-gyp/lib/build.js:262:23)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Linux 5.10.84-1-MANJARO
npm ERR! gyp ERR! command "/usr/local/bin/node" "/app/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /app/node_modules/node-sass
npm ERR! gyp ERR! node -v v17.3.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-01-09T19_05_59_458Z-debug-0.log
ANSWER
Answered 2022-Jan-26 at 14:08Okay that was dumb. But yes, to read those error message for other npm newbs out there:
npm WARN EBADENGINE package: '@casl/react@2.1.1',
npm WARN EBADENGINE required: { npm: '^6.0.0' },
npm WARN EBADENGINE current: { node: 'v17.3.0', npm: '8.3.0' }
This basically means that casl/react (whatever that does) accepts AT MOST npm 6.0.0, but I was running node 17.x with npm 8.x. It balked at that.
Because Docker is awesome, I could just do:
FROM node:14-buster
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json ./
COPY . ./
RUN mkdir node_modules/.cache && chmod -R 777 node_modules/.cache
# start app
CMD ["npm", "start"]
And then it ran fine.
QUESTION
NG_PERSISTENT_BUILD_CACHE=1 ng serve not working
Asked 2022-Jan-20 at 18:32I am trying to use the persistent build cache feature provided by angular but look like its not working for me, I am trying the below command
NG_PERSISTENT_BUILD_CACHE=1 ng serve
It always returns below error
'NG_PERSISTENT_BUILD_CACHE' is not recognized as an internal or external command,operable program or batch file.
I am using angular cli version 12.2.15. I am not sure what I am missing. Below is my packages.json file
"dependencies": {
"@agm/core": "^1.1.0",
"@angular-devkit/core": "^12.2.15",
"@angular/animations": "^12.2.15",
"@angular/common": "^12.2.15",
"@angular/compiler": "^12.2.15",
"@angular/core": "^12.2.15",
"@angular/forms": "^12.2.15",
"@angular/platform-browser": "^12.2.15",
"@angular/platform-browser-dynamic": "^12.2.15",
"@angular/platform-server": "^12.2.15",
"@angular/pwa": "^0.1100.2",
"@angular/router": "^12.2.15",
"@angular/service-worker": "^12.2.15",
"@auth0/angular-jwt": "5.0.2",
"@ng-bootstrap/ng-bootstrap": "^8.0.0",
"@nguniversal/module-map-ngfactory-loader": "^8.1.1",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"@types/ckeditor": "^4.9.10",
"@types/hammerjs": "^2.0.36",
"@types/jest": "^26.0.15",
"@types/node": "^14.14.10",
"@types/papaparse": "^5.3.1",
"@webcomponents/shadydom": "^1.9.0",
"acorn": "^8.0.4",
"angular-chart.js": "^1.1.1",
"angular-file-uploader": "7.0.3",
"angular-mydatepicker": "^0.10.2",
"angular-ng-autocomplete": "^2.0.1",
"angular-split": "4.0.0",
"angular2-datetimepicker": "^1.1.1",
"angular2-text-mask": "9.0.0",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.5.3",
"ckeditor": "4.12.1",
"core-js": "^3.8.0",
"events": "^3.2.0",
"export-to-csv": "^0.2.1",
"first": "0.0.3",
"fullcalendar": "^4.0.0-alpha.4",
"fullcalendar-scheduler": "^4.0.0-alpha.4",
"hammerjs": "^2.0.8",
"highcharts": "^8.2.2",
"html2canvas": "^1.0.0-rc.7",
"jquery": "^3.5.1",
"jspdf": "^2.1.1",
"jw-angular-social-buttons": "^1.0.0",
"mdn-polyfills": "^5.20.0",
"moment-mini-ts": "^2.20.1",
"ng-multiselect-dropdown": "^0.2.10",
"ng2-ckeditor": "^1.2.9",
"ng2-date-picker": "11.0.0",
"ng2-pdf-viewer": "6.2.0",
"ng2-slim-loading-bar": "^4.0.0",
"ng4-loading-spinner": "^1.2.3",
"ng5-slider": "^1.2.6",
"ng9-password-strength-bar": "^1.0.0",
"ngx-bootstrap": "6.2.0",
"ngx-color-picker": "^10.1.0",
"ngx-countdown": "11.0.0",
"ngx-device-detector": "^1.5.2",
"ngx-drag-drop": "^2.0.0",
"ngx-fullcalendar": "^5.0.0-alpha.1",
"ngx-hm-sortable": "^1.0.0",
"ngx-img-cropper": "^10.0.0",
"ngx-infinite-scroll": "^10.0.0",
"ngx-mask": "11.1.4",
"ngx-mega-simple-drag-drop-list": "^1.0.8",
"ngx-order-pipe": "^2.1.1",
"ngx-papaparse": "^5.0.0",
"ngx-print": "^1.2.0-beta.5",
"ngx-select-dropdown": "^1.4.4",
"ngx-sortable": "^1.0.3",
"ngx-sortablejs": "^10.0.0",
"ngx-toastr": "^13.1.0",
"papaparse": "^5.3.0",
"pdfjs-dist": "2.3.200",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.6.3",
"signature_pad": "^3.0.0-beta.4",
"sortablejs": "^1.12.0",
"ts-deferred": "^1.0.4",
"tslib": "^2.2.0",
"webpack-bundle-analyzer": "^4.1.0",
"xlsx": "^0.17.4",
"zone.js": "~0.11.4",
"zxcvbn": "^4.4.2"
},
ANSWER
Answered 2022-Jan-20 at 18:32You seem to be using Windows cmd
to run the command, and hence you are getting the error.
The command:
NG_PERSISTENT_BUILD_CACHE=1 ng serve
is for Unix-like systems and won't work within Windows cmd
.
You can use any of the below methods to make it work:
// 1st command to set the environment variable
set NG_PERSISTENT_BUILD_CACHE=1
// 2nd command
ng serve
set NG_PERSISTENT_BUILD_CACHE=1&&ng serve
npm start
"scripts": {
"start": "set NG_PERSISTENT_BUILD_CACHE=1&&ng serve",
...
}
PS: In all the above methods the environment variable value is set for the cmd
session in which we run the command. If you want to set the environment variable globally, then that can be achieved by adding System variables within Environment Variables dialog. (System Properties -> Environment Variables -> System variables).
QUESTION
find input tag inside a html div and that div is stored in a javascript variable
Asked 2022-Jan-06 at 12:44I am creating fully flexible contact us form where user can drag and drop input elements. so in that case I am stuck in a problem
the html structure is:
<div class="ns_field_box">
<input type="text" data-name="checkbox_label" class="nsdummy-label" value="CheckBox">
<span class="nscheckbox"></span> <input type="text" data-name="checkbox_desc" value="Add checkbox description">
<div class="nshandle">
<span class="dashicons dashicons-move"></span>
<span class="dashicons dashicons-trash nsremove_feild"></span>
</div>
</div>
I stored <div class="ns_field_box">
this element in a javascript variable and want to find and store all input elements inside this variable
javascript code :
$(document).on('click', '#submit_form', function () {
var allelems = $('#B .ns_field_box');
for (i = 0; i < allelems.length; i++) {
var elem = allelems[i];
console.log(elem.children('input')); // at this line browser console says
// 'elem.children is not a function'
}
})
Required files are already set in a proper order
// jquery file
<script src='https://siga.local/nitin/plugins/wp-content/plugins/ns-contact-form/inc/assets/js/jquery.min.js?ver=3.6.0' id='ns_cf_jquery-js'></script>
<script src='https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js?ver=3.6.0' id='ns_cf_sortablejs-js'></script>
<script src='https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js?ver=1.14.0' id='ns_cf_jquerysortablejs-js'></script>
// main javascript file where the code I wrote
<script src='https://siga.local/nitin/plugins/wp-content/plugins/ns-contact-form/inc/assets/js/main.js?ver=1.0.0' id='ns_cf_js-js'></script>
and the browsers javascript console says
main.js?ver=1.0.0:34 Uncaught TypeError:
elem.children is not a function
at HTMLButtonElement.<anonymous> (main.js?ver=1.0.0:34)
at HTMLDocument.dispatch (jquery.min.js?ver=3.6.0:2)
at HTMLDocument.v.handle (jquery.min.js?ver=3.6.0:2)
Thank you to all who help me in advance
ANSWER
Answered 2022-Jan-06 at 12:44 $(document).on('click', '#submit_form', function () {
var allelems = $('#B .ns_field_box');
for (i = 0; i < allelems.length; i++) {
var elem = $(allelems[i]);
console.log(elem.children('input'));
}
})
QUESTION
Updating position of SortableJS + Rails Form
Asked 2021-Dec-01 at 23:30I've seen a lot of tutorials around using Rails + SortableJS and updating the position of an object via Ajax - however, I'm using SortableJS inside a Rails form with hidden fields that contain the "position" attribute.
How can I update all of the elements of a Sortable group after one has been moved?
// javascript/controllers/drag_controller.js
connect() {
this.sortable = Sortable.create(this.element, {
animation: 150,
onEnd: this.end.bind(this)
})
}
end(event) {
// Update "position" field of each sortable object
// event.newIndex works as the position of the newly moved item
}
Here is the nested form item:
// views/item/_form.html.erb
<%= content_tag :div, class: "nested-fields", data: { new_record: form.object.new_record? } do %>
<div class="form-group">
<%= form.label :name %>
<%= form.text_field :name %>
</div>
<%= form.hidden_field :position %>
<% end %>
The form currently works perfectly, aside from the position field. I'm also using acts_as_list which automatically fills in the position on the back-end, but not for users who edit using the form.
ANSWER
Answered 2021-Dec-01 at 23:30In my experience, the gem act_as_list
—which you are already using—does what you need: Automatically updating the records.
For instance, in irb
, using a Message
model and destroying one record:
irb(main):001:0> m = Message.find 11
Message Load (0.8ms) SELECT "messages".* FROM "messages" WHERE "messages"."id" = $1 LIMIT $2 [["id", 11], ["LIMIT", 1]]
=> #<Message id: 11, content: "e", created_at: "2021-11-30 14:30:37.896535000 +0000", updated_at: "2021-11-30 14:41:38.871285000 +0000", position: 8>
irb(main):002:0> m.destroy
TRANSACTION (0.4ms) BEGIN
Message Load (0.8ms) SELECT "messages".* FROM "messages" WHERE "messages"."id" = $1 LIMIT $2 [["id", 11], ["LIMIT", 1]]
Message Destroy (2.6ms) DELETE FROM "messages" WHERE "messages"."id" = $1 [["id", 11]]
Message Update All (3.0ms) UPDATE "messages" SET "position" = ("messages"."position" - 1), "updated_at" = '2021-12-01 18:43:34.628679' WHERE (1 = 1) AND ("messages"."position" > 8)
TRANSACTION (5.0ms) COMMIT
You can see the last action in the console is Update All
, which will update the records by reducing the position
attribute in 1.
QUESTION
React-component is not re-rendered when the store is changed, neither automatically nor even by force update
Asked 2021-Nov-04 at 01:39This functional component should display a sorted list with checkboxes at each item that change the values in the store.
For some reason it is not re-rendered when the store is changed. And without a re-renderer, it (and the whole application) works very crookedly and halfway. I suspect that this is because the store object remains the same, albeit with new content. But I don’t understand how to fix it. I have even inserted a force update to the checkbox handler, but for some reason it does not work too.
Component:
import React, { useState, useReducer } from 'react';
import { ReactSortable } from 'react-sortablejs';
import ListItem from '@mui/material/ListItem';
import Checkbox from '@mui/material/Checkbox';
import { connect } from 'react-redux';
import { setGameVisible, setGameInvisible } from '../store/actions/games';
interface IGamesListProps {
games: [];
setGameVisible: (id: string) => void;
setGameInvisible: (id: string) => void;
}
interface ItemType {
id: string;
name: string;
isVisible: boolean;
}
const GamesList: React.FunctionComponent<IGamesListProps> = ({games, setGameVisible, setGameInvisible}) => {
const [state, setState] = useState<ItemType[]>(games);
// eslint-disable-next-line
const [ignored, forceUpdate] = useReducer(x => x + 1, 0); // this way of force updating is taken from the official React documentation (but even it doesn't work!)
const onCheckboxChangeHandle = (id: string, isVisible: boolean) => {
isVisible ? setGameInvisible(id) : setGameVisible(id);
forceUpdate(); // doesn't work :(((
}
return (
<ReactSortable list={state} setList={setState} tag='ul'>
{state.map((item) => (
<ListItem
sx={{ maxWidth: '300px' }}
key={item.id}
secondaryAction={
<Checkbox
edge="end"
onChange={() => onCheckboxChangeHandle(item.id, item.isVisible)}
checked={item.isVisible}
/>
}
>
{item.name}
</ListItem>
))}
</ReactSortable>
);
};
export default connect(null, { setGameVisible, setGameInvisible })(GamesList);
Reducer:
import { SET_GAMES, SET_GAME_VISIBLE, SET_GAME_INVISIBLE } from '../actions/games';
export const initialState = {
games: [],
};
export default function games(state = initialState, action) {
switch(action.type) {
case SET_GAMES: {
for(let obj of action.payload.games) {
obj.isVisible = true;
}
return {
...state,
games: action.payload.games,
};
}
case SET_GAME_VISIBLE: {
for(let obj of state.games) {
if (obj.id === action.payload.id) {
obj.isVisible = true;
};
}
return {
...state,
};
}
case SET_GAME_INVISIBLE: {
for(let obj of state.games) {
if (obj.id === action.payload.id) {
obj.isVisible = false;
};
}
return {
...state,
};
}
default:
return state;
}
}
Thank you for any help!
ANSWER
Answered 2021-Nov-03 at 10:04mapStateToProps
into Component in a state change, and even you do, useState
won't use new game prop value for non-first render. You must use useEffect and trigger changes of the game and set the to state locally.At this point you must find the inner state redundant and you can remove it and totally rely on the redux state.
const mapStateToProp = (state) => ({
games: state.games // you may need to change the path
})
connect(mapStateToProp, { setGameVisible, setGameInvisible })(GamesList);
state === state
. This probably doesn't cause an issue because the outer state changes by the way, but I think it worth it to mention it.for(let obj of action.payload.games) {
obj.isVisible = true; // mutating actions.payload.games[<item>]
}
return {
...state,
games: [...action.payload.games], // add immutability for re-redenr
};
// or use map
return {
...state,
games: action.payload.games.map(obj => ({...obj, isVisible:true})),
};
forceUpdate
will cause the component to re-render, and you can test that by adding a console.log, but it won't repaint the whole subtree of your component including inner children if their props don't change that's because of performance issue. React try to update as efficiently as possible. Also you the key
optimization layer which prevent change if the order of items and id of them doesn't changeQUESTION
Vue draggable. Prevent drop on specific node and allow drop on specific node
Asked 2021-Oct-28 at 12:03<draggable
class="nodes-to-drag"
v-model="arrayToDrag"
group="people"
@start="drag = true"
@end="drag = false"
item-key="id"
>
<template #item="{ element }">
<p class="items-from-arrayToDrag">{{ element.name }}</p>
</template>
</draggable>
I use draggable for vue3 https://github.com/SortableJS/vue.draggable.next
I have array with items I want to drag
And 2 empty arrays which look the same as first one and have the same group name.
I need items with specific index in array be draggable only to the first column (first array) and with another index only to the second column (second array)? How to implement this? Is there something that I can use except group name (all items to drag are from the same group)
ANSWER
Answered 2021-Oct-26 at 14:01draggable
@change
event listener on each columnCommunity Discussions, Code Snippets contain sources that include Stack Exchange Network
No vulnerabilities reported
Save this library and start creating your kit
HTTPS
https://github.com/SortableJS/sortablejs.git
CLI
gh repo clone SortableJS/sortablejs
SSH
git@github.com:SortableJS/sortablejs.git
Share this Page
See Similar Libraries in
by alvarotrigo
by atlassian
by SortableJS
by SortableJS
by dimsemenov
See all Widget Libraries
by SortableJS JavaScript
by SortableJS JavaScript
by SortableJS JavaScript
by SortableJS TypeScript
by SortableJS TypeScript
See all Libraries by this author
by alvarotrigo
by atlassian
by enyo
by SortableJS
by jupyter
See all Widget Libraries
by ingyesid
by ylyc
by romainpiel
by eugener
by TheLevelUp
See all Widget Libraries
by ingyesid
by sunphiz
by ylyc
by romainpiel
by bauerca
See all Widget Libraries
by eugener
by twotoasters
by square
by askerov
by Cue
See all Widget Libraries
by manjitkumar
by quitegreensky
by sanjioh
by P403n1x87
by Saadmairaj
See all Widget Libraries
Save this library and start creating your kit
Open Weaver – Develop Applications Faster with Open Source