danilosampaio/semantic-kanban

A simple Kanban Component built with Semantic-UI + Vue.js

Opensource projects contributions:

Tensorflow: tensorflow/tfjs#6199

Deno: denoland/vscode_deno#169 - denoland/deno#7329

Ava: avajs/ava#932

Yeoman yeoman/yosay#21 - yeoman/yosay#20 - yeoman/yosay#19 - yeoman/stringify-object#18

Word-wrap: jonschlinkert/word-wrap#9

semantic-kanban's Issues

jQuery should not be used with VueJS

I have noticed that you use jQuery to hide and show dialogs, however, it is recommended not to since it manipulates the DOM. Besides this, I couldn't even use the component since jQuery doesn't even load. Here is the error:

webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17 [vue-router] Failed to resolve async component default: ReferenceError: jQuery is not defined
warn @ webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17
webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17 [vue-router] uncaught error during route navigation:
warn @ webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17
webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1898 ReferenceError: jQuery is not defined
    at eval (webpack-internal:///./node_modules/semantic-ui-css/semantic.min.js:11)
    at Object../node_modules/semantic-ui-css/semantic.min.js (:8080/2.js:1969)
    at __webpack_require__ (app.js:767)
    at fn (app.js:130)
    at eval (webpack-internal:///./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/semantic-kanban/src/semanticKanban.vue?vue&type=script&lang=js&:14)
    at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/semantic-kanban/src/semanticKanban.vue?vue&type=script&lang=js& (:8080/2.js:115)
    at __webpack_require__ (app.js:767)
    at fn (app.js:130)
    at eval (webpack-internal:///./node_modules/semantic-kanban/src/semanticKanban.vue?vue&type=script&lang=js&:2)
    at Module../node_modules/semantic-kanban/src/semanticKanban.vue?vue&type=script&lang=js& (:8080/2.js:1923)

I am trying to use it in a Quasar Framework app.

Please see my recommendation about your component here, notice the comments about the use of jQuery in Vue. If possible make this Quasar Framework compatible or even a QF component. Quasar has all the dialogs, cards and things you need. A lot of developers consider jQuery deprecated because of modern approaches to reactive designs. This is a very nice component and I would like to see it go far.

Therefore, this issue is related to the use of jQuery instead of VueJS features, Vue actually doesn't want you to do exactly what you are doing; manually manipulate the DOM. Consider using v-show or v-if. Create or use QF dialogs instead of jQuery UI dialogs.

I noticed that your component is utilizing Semantic-UI-css to create dialogs. Anyway, the jQuery fact still remains. Do without it pliz. Consider doing this:

<div class="ui basic modal" v-show="showDialog">
   ....
</div>

// ...
data() {
   return {
       showDialog: false,
   }
},
// ...
methods: {
show () {
   // $(this.$el).modal('show')
   this.showDialog = true
},
hide () {
   // $(this.$el).modal('hide')
   this.showDialog = false
},
}

see no need for jQuery there 🤷🏽‍♂️

Configure Webpack CSS Loader

Semantic-kanban depends on two css files to work properly:

• dragula.css
• datepicker.css

To avoid including <style> tags directly in components, or to add this modules as peerDependencies, probably the best solution is to configure Webpack to load css files.

Add `newMember` event

• add button in the Team column
  
• it will to emit the newMember event
• create the defaultMemberDialog to add/edit a member

Add the status `archived`

The archived status represents a finished task that it's not viewed on Kanban board.

Add delete task event - `close icon`

v-on:click: emits 'deleteTask event.
create default confirm dialog (modal)

Add a colorpicker to define the color of labels

Add a colorpicker on the right side of the name input, to define a color of the new label.

Add more tests using Karma + Jasmine

In order to facilitate to add more unit tests, the base code was rewritten based on the vue-webpack-boilerplace, that is a full-featured webpack setup, including unit testes configurations.

Allow to add more columns

It will be very useful to have support for adding / removing columns

Allow adding tags/labels in tasks

Allow adding tags/labels in tasks:

Icons conflicting with material icons

thank you very much for very useful library.

I have noticed that all the icons in the app disappear as kanban board is overriding them. icons need to be scoped to the component only, to not to break other elements of the UI.

Example not working

I have git cloned and ran npm run dev. The example runs but i can't make any changes such as adding new cards, deleting old ones, adding new team members, tasks or anything else, or editing existing cards and any texts. It's as if the whole app is readonly. Am I missing something?

allow to change member's avatar

• Make avatar picture clickable, that emits changeAvatar event
• Create a default dialog for upload the avatar image, that emits updateAvatar on click save button. The event param can be a Base64 image string.

Set the default value of the `status` field to 'backlog'

Set the default value of the status field to 'backlog', when the newTask event is emitted (defualtTaskDialog).