lavkach3

1
$(function () {
2
  // ----------------------------------------------------------------------
3
  // draggble item
4
  // ----------------------------------------------------------------------
5
  function kanbanSortable() {
6
    $('[data-sortable="true"]').sortable({
7
      connectWith: ".connect-sorting-content",
8
      items: ".card",
9
      cursor: "move",
10
      placeholder: "ui-state-highlight",
11
      refreshPosition: true,
12
      stop: function (event, ui) {
13
        var parent_ui = ui.item.parent().attr("data-item");
14
      },
15
      update: function (event, ui) {
16
        console.log(ui);
17
        console.log(ui.item);
18
      },
19
    });
20
  }
21

22
  // ----------------------------------------------------------------------
23
  // clear all task on click
24
  // ----------------------------------------------------------------------
25
  function clearItem() {
26
    $(".list-clear-all")
27
      .off("click")
28
      .on("click", function (event) {
29
        event.preventDefault();
30
        $(this)
31
          .parents('[data-action="sorting"]')
32
          .find(".connect-sorting-content .card")
33
          .remove();
34
      });
35
  }
36

37
  // ----------------------------------------------------------------------
38
  // add task and open modal
39
  // ----------------------------------------------------------------------
40
  function addKanbanItem() {
41
    $(".addTask").on("click", function (event) {
42
      event.preventDefault();
43
      getParentElement = $(this)
44
        .parents('[data-action="sorting"]')
45
        .attr("data-item");
46
      $(".edit-task-title").hide();
47
      $(".add-task-title").show();
48
      $('[data-btn-action="addTask"]').show();
49
      $('[data-btn-action="editTask"]').hide();
50
      $("#addItemModal").modal("show");
51
      kanban_add(getParentElement);
52
    });
53
  }
54

55
  // ----------------------------------------------------------------------
56
  //   add default item
57
  // ----------------------------------------------------------------------
58
  function kanban_add(getParent) {
59
    $('[data-btn-action="addTask"]')
60
      .off("click")
61
      .on("click", function (event) {
62
        getAddBtnClass = $(this).attr("class").split(" ")[1];
63

64
        var today = new Date();
65
        var dd = String(today.getDate()).padStart(2, "0");
66
        var mm = String(today.getMonth());
67

68
        var monthNames = [
69
          "Jan",
70
          "Feb",
71
          "Mar",
72
          "Apr",
73
          "May",
74
          "Jun",
75
          "Jul",
76
          "Aug",
77
          "Sep",
78
          "Oct",
79
          "Nov",
80
          "Dec",
81
        ];
82

83
        today = dd + " " + monthNames[mm];
84

85
        var $_getParent = getParent;
86

87
        var itemTitle = document.getElementById("kanban-title").value;
88
        var itemText = document.getElementById("kanban-text").value;
89

90
        item_html =
91
          '<div data-draggable="true" class="card task-text-progress" style="">' +
92
          '<div class="card-body">' +
93
          '<div class="task-header">' +
94
          '<div class="">' +
95
          '<h4 class="" data-item-title="' +
96
          itemTitle +
97
          '">' +
98
          itemTitle +
99
          "</h4>" +
100
          "</div>" +
101
          '<div class="">' +
102
          '<div class="dropdown">' +
103
          '<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink-4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">' +
104
          '<i class="ti ti-dots-vertical text-dark"></i>' +
105
          "</a>" +
106
          '<div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink-4">' +
107
          '<a class="dropdown-item kanban-item-edit cursor-pointer d-flex align-items-center gap-1" href="javascript:void(0);"><i class="ti ti-pencil fs-5"></i>Edit</a>' +
108
          '<a class="dropdown-item kanban-item-delete cursor-pointer d-flex align-items-center gap-1" href="javascript:void(0);"><i class="ti ti-trash fs-5"></i>Delete</a>' +
109
          "</div>" +
110
          "</div>" +
111
          "</div>" +
112
          "</div>" +
113
          '<div class="task-body">' +
114
          '<div class="task-content">' +
115
          '<p class="mb-0" data-item-text="' +
116
          itemText +
117
          '">' +
118
          itemText +
119
          "</p>" +
120
          "</div>" +
121
          '<div class="task-bottom">' +
122
          '<div class="tb-section-1">' +
123
          '<span class="hstack gap-2 fs-2" data-item-date="' +
124
          today +
125
          '"><i class="ti ti-calendar fs-5"></i> ' +
126
          today +
127
          "</span>" +
128
          "</div>" +
129
          '<div class="tb-section-2">' +
130
          '<span class="badge text-bg-success fs-1">Design</span>' +
131
          "</div>" +
132
          "</div>" +
133
          "</div>" +
134
          "</div>" +
135
          "</div>";
136

137
        $("[data-item='" + $_getParent + "'] .connect-sorting-content").append(
138
          item_html
139
        );
140

141
        $("#addItemModal").modal("hide");
142

143
        kanbanEdit();
144
        kanbanDelete();
145
      });
146
  }
147

148
  // ----------------------------------------------------------------------
149
  //   add item
150
  // ----------------------------------------------------------------------
151
  $("#add-list")
152
    .off("click")
153
    .on("click", function (event) {
154
      event.preventDefault();
155

156
      $(".add-list").show();
157
      $(".edit-list").hide();
158
      $(".edit-list-title").hide();
159
      $(".add-list-title").show();
160
      $("#addListModal").modal("show");
161
    });
162

163
  // ----------------------------------------------------------------------
164
  //   add list
165
  // ----------------------------------------------------------------------
166
  $(".add-list")
167
    .off("click")
168
    .on("click", function (event) {
169
      var today = new Date();
170
      var dd = String(today.getDate()).padStart(2, "0");
171
      var mm = String(today.getMonth() + 1).padStart(2, "0");
172

173
      today = mm + "." + dd;
174

175
      var itemTitle = document.getElementById("item-name").value;
176

177
      var itemNameLowercase = itemTitle.toLowerCase();
178
      var itemNameRemoveWhiteSpace = itemNameLowercase.split(" ").join("_");
179
      var itemDataAttr = itemNameRemoveWhiteSpace;
180

181
      item_html =
182
        '<div data-item="item-' +
183
        itemDataAttr +
184
        '" class="task-list-container  mb-4 " data-action="sorting">' +
185
        '<div class="connect-sorting">' +
186
        '<div class="task-container-header">' +
187
        '<h6 class="item-head mb-0 fs-4 fw-semibold" data-item-title="' +
188
        itemTitle +
189
        '">' +
190
        itemTitle +
191
        "</h6>" +
192
        '<div class="hstack gap-2">' +
193
        '<div class="dropdown">' +
194
        '<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink-4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">' +
195
        '<i class="ti ti-dots-vertical text-dark"></i>' +
196
        "</a>" +
197
        '<div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink-4">' +
198
        '<a class="dropdown-item list-edit" href="javascript:void(0);">Edit</a>' +
199
        '<a class="dropdown-item list-delete" href="javascript:void(0);">Delete</a>' +
200
        '<a class="dropdown-item list-clear-all" href="javascript:void(0);">Clear All</a>' +
201
        "</div>" +
202
        "</div>" +
203
        "</div>" +
204
        "</div>" +
205
        '<div class="connect-sorting-content" data-sortable="true">' +
206
        "</div>" +
207
        "</div>" +
208
        "</div>";
209

210
      $(".task-list-section").append(item_html);
211
      $("#addListModal").modal("hide");
212
      $("#item-name").val("");
213
      kanbanSortable();
214
      editItem();
215
      deleteItem();
216
      clearItem();
217
      addKanbanItem();
218
      kanbanEdit();
219
      kanbanDelete();
220

221
      // --------------------
222
      // Tooltip
223
      // --------------------
224
      var tooltipTriggerList = [].slice.call(
225
        document.querySelectorAll('[data-bs-toggle="tooltip"]')
226
      );
227
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
228
        return new bootstrap.Tooltip(tooltipTriggerEl);
229
      });
230
    });
231

232
  // ----------------------------------------------------------------------
233
  // edit item
234
  // ----------------------------------------------------------------------
235
  function editItem() {
236
    $(".list-edit")
237
      .off("click")
238
      .on("click", function (event) {
239
        event.preventDefault();
240

241
        var parentItem = $(this);
242

243
        $(".add-list").hide();
244
        $(".edit-list").show();
245

246
        $(".add-list-title").hide();
247
        $(".edit-list-title").show();
248

249
        var itemTitle = parentItem
250
          .parents('[data-action="sorting"]')
251
          .find(".item-head")
252
          .attr("data-item-title");
253
        $("#item-name").val(itemTitle);
254

255
        $(".edit-list")
256
          .off("click")
257
          .on("click", function (event) {
258
            var $_innerThis = $(this);
259
            var $_getListTitle = document.getElementById("item-name").value;
260

261
            var $_editedListTitle = parentItem
262
              .parents('[data-action="sorting"]')
263
              .find(".item-head")
264
              .html($_getListTitle);
265
            var $_editedListTitleDataAttr = parentItem
266
              .parents('[data-action="sorting"]')
267
              .find(".item-head")
268
              .attr("data-item-title", $_getListTitle);
269

270
            $("#addListModal").modal("hide");
271
            $("#item-name").val("");
272
          });
273
        $("#addListModal").modal("show");
274
        $("#addListModal").on("hidden.bs.modal", function (e) {
275
          $("#item-name").val("");
276
        });
277
      });
278
  }
279

280
  // ----------------------------------------------------------------------
281
  // all list delete
282
  // ----------------------------------------------------------------------
283
  function deleteItem() {
284
    $(".list-delete")
285
      .off("click")
286
      .on("click", function (event) {
287
        event.preventDefault();
288
        $(this).parents("[data-action]").remove();
289
      });
290
  }
291

292
  // ----------------------------------------------------------------------
293
  // Delete item on click
294
  // ----------------------------------------------------------------------
295
  function kanbanDelete() {
296
    $(".card .kanban-item-delete")
297
      .off("click")
298
      .on("click", function (event) {
299
        event.preventDefault();
300

301
        get_card_parent = $(this).parents(".card");
302

303
        $("#deleteConformation").modal("show");
304

305
        $('[data-remove="task"]').on("click", function (event) {
306
          event.preventDefault();
307
          /* Act on the event */
308
          get_card_parent.remove();
309
          $("#deleteConformation").modal("hide");
310
        });
311
      });
312
  }
313

314
  // ----------------------------------------------------------------------
315
  // Edit item on click
316
  // ----------------------------------------------------------------------
317
  function kanbanEdit() {
318
    $(".card .kanban-item-edit")
319
      .off("click")
320
      .on("click", function (event) {
321
        event.preventDefault();
322

323
        var parentItem = $(this);
324

325
        $(".add-task-title").hide();
326
        $(".edit-task-title").show();
327

328
        $('[data-btn-action="addTask"]').hide();
329
        $('[data-btn-action="editTask"]').show();
330

331
        var itemKanbanTitle = parentItem
332
          .parents(".card")
333
          .find("h4")
334
          .attr("data-item-title");
335
        var get_kanban_title = $(".task-text-progress #kanban-title").val(
336
          itemKanbanTitle
337
        );
338

339
        var itemText = parentItem
340
          .parents(".card")
341
          .find('p:not(".progress-count")')
342
          .attr("data-item-text");
343
        var get_kanban_text = $(".task-text-progress #kanban-text").val(
344
          itemText
345
        );
346

347
        $('[data-btn-action="editTask"]')
348
          .off("click")
349
          .on("click", function (event) {
350
            var kanbanValueTitle =
351
              document.getElementById("kanban-title").value;
352
            var kanbanValueText = document.getElementById("kanban-text").value;
353

354
            var itemDataAttr = parentItem
355
              .parents(".card")
356
              .find("h4")
357
              .attr("data-item-title", kanbanValueTitle);
358
            var itemKanbanTitle = parentItem
359
              .parents(".card")
360
              .find("h4")
361
              .html(kanbanValueTitle);
362
            var itemTextDataAttr = parentItem
363
              .parents(".card")
364
              .find('p:not(".progress-count")')
365
              .attr("data-tasktext", kanbanValueText);
366
            var itemText = parentItem
367
              .parents(".card")
368
              .find('p:not(".progress-count")')
369
              .html(kanbanValueText);
370

371
            $("#addItemModal").modal("hide");
372
            var setDate = $(".taskDate").html("");
373
            $(".taskDate").hide();
374
          });
375
        $("#addItemModal").modal("show");
376
      });
377
  }
378

379
  editItem();
380
  deleteItem();
381
  clearItem();
382
  addKanbanItem();
383
  kanbanEdit();
384
  kanbanDelete();
385
  kanbanSortable();
386
});
387