| 
      
            Line 0
          
      
      
        Link Here
      
     | 
  
            
               | 
               | 
              1 | 
              <template>  | 
            
            
              | 2 | 
                  <DataTable  | 
            
            
              | 3 | 
                      :columns="tableColumns"  | 
            
            
              | 4 | 
                      :options="{ ...dataTablesDefaults, ...options, ...mandatoryOptions }" | 
            
            
              | 5 | 
                      :data="data"  | 
            
            
              | 6 | 
                      ref="table"  | 
            
            
              | 7 | 
                  >  | 
            
            
              | 8 | 
                      <slot></slot>  | 
            
            
              | 9 | 
                  </DataTable>  | 
            
            
              | 10 | 
              </template>  | 
            
            
              | 11 | 
               | 
            
            
              | 12 | 
              <script>  | 
            
            
              | 13 | 
              import DataTable from "datatables.net-vue3"  | 
            
            
              | 14 | 
              import DataTablesLib from "datatables.net"  | 
            
            
              | 15 | 
              import { inject, nextTick } from "vue" | 
            
            
              | 16 | 
               | 
            
            
              | 17 | 
              DataTable.use(DataTablesLib)  | 
            
            
              | 18 | 
               | 
            
            
              | 19 | 
              function toggledClearFilter(searchText, tableId) { | 
            
            
              | 20 | 
                  if (searchText == "") { | 
            
            
              | 21 | 
                      $("#" + tableId + "_wrapper") | 
            
            
              | 22 | 
                          .find(".dt_button_clear_filter") | 
            
            
              | 23 | 
                          .addClass("disabled") | 
            
            
              | 24 | 
                  } else { | 
            
            
              | 25 | 
                      $("#" + tableId + "_wrapper") | 
            
            
              | 26 | 
                          .find(".dt_button_clear_filter") | 
            
            
              | 27 | 
                          .removeClass("disabled") | 
            
            
              | 28 | 
                  }  | 
            
            
              | 29 | 
              }  | 
            
            
              | 30 | 
               | 
            
            
              | 31 | 
              export default { | 
            
            
              | 32 | 
                  name: "KohaTable",  | 
            
            
              | 33 | 
                  data() { | 
            
            
              | 34 | 
                      return { | 
            
            
              | 35 | 
                          errorMessage: "",  | 
            
            
              | 36 | 
                          tableColumns: this.columns,  | 
            
            
              | 37 | 
                          mandatoryOptions: { | 
            
            
              | 38 | 
                              deferRender: true,  | 
            
            
              | 39 | 
                              paging: true,  | 
            
            
              | 40 | 
                              serverSide: true,  | 
            
            
              | 41 | 
                              searching: true,  | 
            
            
              | 42 | 
                              pagingType: "full_numbers",  | 
            
            
              | 43 | 
                              processing: true,  | 
            
            
              | 44 | 
                              ajax: async (data, callback, settings) => { | 
            
            
              | 45 | 
                                  const options = { | 
            
            
              | 46 | 
                                      ...this.dataTablesDefaults,  | 
            
            
              | 47 | 
                                      ...this.options,  | 
            
            
              | 48 | 
                                      ...this.mandatoryOptions,  | 
            
            
              | 49 | 
                                  }  | 
            
            
              | 50 | 
                                  try { | 
            
            
              | 51 | 
                                      const headers = {} | 
            
            
              | 52 | 
                                      if (options.embed) { | 
            
            
              | 53 | 
                                          headers["x-koha-embed"] = Array.isArray(  | 
            
            
              | 54 | 
                                              options.embed  | 
            
            
              | 55 | 
                                          )  | 
            
            
              | 56 | 
                                              ? options.embed.join(",") | 
            
            
              | 57 | 
                                              : options.embed  | 
            
            
              | 58 | 
                                      }  | 
            
            
              | 59 | 
               | 
            
            
              | 60 | 
                                      const length = data.length  | 
            
            
              | 61 | 
                                      const start = data.start  | 
            
            
              | 62 | 
               | 
            
            
              | 63 | 
                                      const dataSet = { | 
            
            
              | 64 | 
                                          _page: Math.floor(start / length) + 1,  | 
            
            
              | 65 | 
                                          _per_page: length,  | 
            
            
              | 66 | 
                                      }  | 
            
            
              | 67 | 
               | 
            
            
              | 68 | 
                                      const build_query = (col, value) => { | 
            
            
              | 69 | 
                                          const parts = []  | 
            
            
              | 70 | 
                                          const attributes = col.data.split(":") | 
            
            
              | 71 | 
                                          return attributes.map(attr => { | 
            
            
              | 72 | 
                                              let criteria = options.criteria  | 
            
            
              | 73 | 
                                              if (value.match(/^\^(.*)\$$/)) { | 
            
            
              | 74 | 
                                                  value = value  | 
            
            
              | 75 | 
                                                      .replace(/^\^/, "")  | 
            
            
              | 76 | 
                                                      .replace(/\$$/, "")  | 
            
            
              | 77 | 
                                                  criteria = "exact"  | 
            
            
              | 78 | 
                                              } else { | 
            
            
              | 79 | 
                                                  // escape SQL LIKE special characters % and _  | 
            
            
              | 80 | 
                                                  value = value.replace(/(\%|\\)/g, "\\$1")  | 
            
            
              | 81 | 
                                              }  | 
            
            
              | 82 | 
                                              return { | 
            
            
              | 83 | 
                                                  [!attr.includes(".") ? "me." + attr : attr]: | 
            
            
              | 84 | 
                                                      criteria === "exact"  | 
            
            
              | 85 | 
                                                          ? value  | 
            
            
              | 86 | 
                                                          : { | 
            
            
              | 87 | 
                                                                like:  | 
            
            
              | 88 | 
                                                                    ([  | 
            
            
              | 89 | 
                                                                        "contains",  | 
            
            
              | 90 | 
                                                                        "ends_with",  | 
            
            
              | 91 | 
                                                                    ].indexOf(criteria) !== -1  | 
            
            
              | 92 | 
                                                                        ? "%"  | 
            
            
              | 93 | 
                                                                        : "") +  | 
            
            
              | 94 | 
                                                                    value +  | 
            
            
              | 95 | 
                                                                    ([  | 
            
            
              | 96 | 
                                                                        "contains",  | 
            
            
              | 97 | 
                                                                        "starts_with",  | 
            
            
              | 98 | 
                                                                    ].indexOf(criteria) !== -1  | 
            
            
              | 99 | 
                                                                        ? "%"  | 
            
            
              | 100 | 
                                                                        : ""),  | 
            
            
              | 101 | 
                                                            },  | 
            
            
              | 102 | 
                                              }  | 
            
            
              | 103 | 
                                          })  | 
            
            
              | 104 | 
                                      }  | 
            
            
              | 105 | 
               | 
            
            
              | 106 | 
                                      const filter = data.search.value  | 
            
            
              | 107 | 
                                      // Build query for each column filter  | 
            
            
              | 108 | 
                                      const and_query_parameters = settings.aoColumns  | 
            
            
              | 109 | 
                                          .filter(function (col) { | 
            
            
              | 110 | 
                                              return (  | 
            
            
              | 111 | 
                                                  col.bSearchable &&  | 
            
            
              | 112 | 
                                                  typeof col.data == "string" &&  | 
            
            
              | 113 | 
                                                  data.columns[col.idx].search.value != ""  | 
            
            
              | 114 | 
                                              )  | 
            
            
              | 115 | 
                                          })  | 
            
            
              | 116 | 
                                          .map(function (col) { | 
            
            
              | 117 | 
                                              const value = data.columns[col.idx].search.value  | 
            
            
              | 118 | 
                                              return build_query(col, value)  | 
            
            
              | 119 | 
                                          })  | 
            
            
              | 120 | 
                                          .map(function r(e) { | 
            
            
              | 121 | 
                                              return $.isArray(e) ? $.map(e, r) : e  | 
            
            
              | 122 | 
                                          })  | 
            
            
              | 123 | 
               | 
            
            
              | 124 | 
                                      // Build query for the global search filter  | 
            
            
              | 125 | 
                                      const or_query_parameters = settings.aoColumns  | 
            
            
              | 126 | 
                                          .filter(function (col) { | 
            
            
              | 127 | 
                                              return col.bSearchable && filter != ""  | 
            
            
              | 128 | 
                                          })  | 
            
            
              | 129 | 
                                          .map(function (col) { | 
            
            
              | 130 | 
                                              const value = filter  | 
            
            
              | 131 | 
                                              return build_query(col, value)  | 
            
            
              | 132 | 
                                          })  | 
            
            
              | 133 | 
                                          .map(function r(e) { | 
            
            
              | 134 | 
                                              return $.isArray(e) ? $.map(e, r) : e  | 
            
            
              | 135 | 
                                          })  | 
            
            
              | 136 | 
               | 
            
            
              | 137 | 
                                      if (this.default_filters) { | 
            
            
              | 138 | 
                                          const additional_filters = {} | 
            
            
              | 139 | 
                                          for (f in this.default_filters) { | 
            
            
              | 140 | 
                                              let k  | 
            
            
              | 141 | 
                                              let v  | 
            
            
              | 142 | 
                                              if (  | 
            
            
              | 143 | 
                                                  typeof this.default_filters[f] ===  | 
            
            
              | 144 | 
                                                  "function"  | 
            
            
              | 145 | 
                                              ) { | 
            
            
              | 146 | 
                                                  const val = this.default_filters[f]()  | 
            
            
              | 147 | 
                                                  if (val != undefined && val != "") { | 
            
            
              | 148 | 
                                                      k = f  | 
            
            
              | 149 | 
                                                      v = val  | 
            
            
              | 150 | 
                                                  }  | 
            
            
              | 151 | 
                                              } else { | 
            
            
              | 152 | 
                                                  k = f  | 
            
            
              | 153 | 
                                                  v = this.default_filters[f]  | 
            
            
              | 154 | 
                                              }  | 
            
            
              | 155 | 
               | 
            
            
              | 156 | 
                                              // Pass to -or if you want a separate OR clause  | 
            
            
              | 157 | 
                                              // It's not the usual DBIC notation!  | 
            
            
              | 158 | 
                                              if (f == "-or") { | 
            
            
              | 159 | 
                                                  if (v) or_query_parameters.push(v)  | 
            
            
              | 160 | 
                                              } else if (f == "-and") { | 
            
            
              | 161 | 
                                                  if (v) and_query_parameters.push(v)  | 
            
            
              | 162 | 
                                              } else if (v) { | 
            
            
              | 163 | 
                                                  additional_filters[k] = v  | 
            
            
              | 164 | 
                                              }  | 
            
            
              | 165 | 
                                          }  | 
            
            
              | 166 | 
                                          if (Object.keys(additional_filters).length) { | 
            
            
              | 167 | 
                                              and_query_parameters.push(additional_filters)  | 
            
            
              | 168 | 
                                          }  | 
            
            
              | 169 | 
                                      }  | 
            
            
              | 170 | 
                                      let query_parameters = and_query_parameters  | 
            
            
              | 171 | 
                                      if (or_query_parameters.length) { | 
            
            
              | 172 | 
                                          query_parameters.push(or_query_parameters)  | 
            
            
              | 173 | 
                                      }  | 
            
            
              | 174 | 
               | 
            
            
              | 175 | 
                                      if (query_parameters.length) { | 
            
            
              | 176 | 
                                          query_parameters = JSON.stringify(  | 
            
            
              | 177 | 
                                              query_parameters.length === 1  | 
            
            
              | 178 | 
                                                  ? query_parameters[0]  | 
            
            
              | 179 | 
                                                  : { "-and": query_parameters } | 
            
            
              | 180 | 
                                          )  | 
            
            
              | 181 | 
                                          if (options.header_filter) { | 
            
            
              | 182 | 
                                              headers["x-koha-query"] = query_parameters  | 
            
            
              | 183 | 
                                          } else { | 
            
            
              | 184 | 
                                              dataSet.q = query_parameters  | 
            
            
              | 185 | 
                                          }  | 
            
            
              | 186 | 
                                      }  | 
            
            
              | 187 | 
               | 
            
            
              | 188 | 
                                      dataSet._match = options.criteria  | 
            
            
              | 189 | 
               | 
            
            
              | 190 | 
                                      if (data.draw !== undefined) { | 
            
            
              | 191 | 
                                          headers["x-koha-request-id"] = data.draw  | 
            
            
              | 192 | 
                                      }  | 
            
            
              | 193 | 
               | 
            
            
              | 194 | 
                                      if (options.columns) { | 
            
            
              | 195 | 
                                          const order = data.order  | 
            
            
              | 196 | 
                                          const orderArray = new Array()  | 
            
            
              | 197 | 
                                          order.forEach(function (e, i) { | 
            
            
              | 198 | 
                                              const order_col = e.column  | 
            
            
              | 199 | 
                                              let order_by = options.columns[order_col].data  | 
            
            
              | 200 | 
                                              order_by = order_by.split(":") | 
            
            
              | 201 | 
                                              const order_dir = e.dir == "asc" ? "+" : "-"  | 
            
            
              | 202 | 
                                              Array.prototype.push.apply(  | 
            
            
              | 203 | 
                                                  orderArray,  | 
            
            
              | 204 | 
                                                  order_by.map(  | 
            
            
              | 205 | 
                                                      x =>  | 
            
            
              | 206 | 
                                                          order_dir +  | 
            
            
              | 207 | 
                                                          (!x.includes(".") ? "me." + x : x) | 
            
            
              | 208 | 
                                                  )  | 
            
            
              | 209 | 
                                              )  | 
            
            
              | 210 | 
                                          })  | 
            
            
              | 211 | 
                                          dataSet._order_by = orderArray  | 
            
            
              | 212 | 
                                              .filter((v, i, a) => a.indexOf(v) === i)  | 
            
            
              | 213 | 
                                              .join(",") | 
            
            
              | 214 | 
                                      }  | 
            
            
              | 215 | 
               | 
            
            
              | 216 | 
                                      const query = new URLSearchParams(dataSet)  | 
            
            
              | 217 | 
               | 
            
            
              | 218 | 
                                      const response = await this.list({ query, headers }) | 
            
            
              | 219 | 
                                      if (!response.ok) { | 
            
            
              | 220 | 
                                          throw Error(  | 
            
            
              | 221 | 
                                              `${response.status} ${response.statusText}` | 
            
            
              | 222 | 
                                          )  | 
            
            
              | 223 | 
                                      }  | 
            
            
              | 224 | 
                                      const json = { data: response.data } | 
            
            
              | 225 | 
                                      if (response.headers["x-total-count"]) { | 
            
            
              | 226 | 
                                          const total = response.headers["x-total-count"]  | 
            
            
              | 227 | 
                                          json.recordsTotal = total  | 
            
            
              | 228 | 
                                          json.recordsFiltered = total  | 
            
            
              | 229 | 
                                      }  | 
            
            
              | 230 | 
                                      if (response.headers["x-base-total-count"]) { | 
            
            
              | 231 | 
                                          json.recordsTotal =  | 
            
            
              | 232 | 
                                              response.headers["x-base-total-count"]  | 
            
            
              | 233 | 
                                      }  | 
            
            
              | 234 | 
                                      if (response.headers["x-koha-request-id"]) { | 
            
            
              | 235 | 
                                          json.draw = response.headers["x-koha-request-id"]  | 
            
            
              | 236 | 
                                      }  | 
            
            
              | 237 | 
                                      callback(json)  | 
            
            
              | 238 | 
                                  } catch (error) { | 
            
            
              | 239 | 
                                      this.errorMessage = `<div>${this.$__( | 
            
            
              | 240 | 
                                          "Error retrieving data: %s"  | 
            
            
              | 241 | 
                                      ).format(error.message)}</div>`  | 
            
            
              | 242 | 
                                      callback([])  | 
            
            
              | 243 | 
                                  }  | 
            
            
              | 244 | 
                              },  | 
            
            
              | 245 | 
                              serverSide: true,  | 
            
            
              | 246 | 
                          },  | 
            
            
              | 247 | 
                          dataTablesDefaults: { | 
            
            
              | 248 | 
                              language: { | 
            
            
              | 249 | 
                                  paginate: { | 
            
            
              | 250 | 
                                      first: this.$__("First"), | 
            
            
              | 251 | 
                                      last: this.$__("Last"), | 
            
            
              | 252 | 
                                      next: this.$__("Next"), | 
            
            
              | 253 | 
                                      previous: this.$__("Previous"), | 
            
            
              | 254 | 
                                  },  | 
            
            
              | 255 | 
                                  emptyTable: this.options.emptyTable  | 
            
            
              | 256 | 
                                      ? this.options.emptyTable  | 
            
            
              | 257 | 
                                      : this.$__("No data available in table"), | 
            
            
              | 258 | 
                                  info: this.$__(  | 
            
            
              | 259 | 
                                      "Showing _START_ to _END_ of _TOTAL_ entries"  | 
            
            
              | 260 | 
                                  ),  | 
            
            
              | 261 | 
                                  infoEmpty: this.$__("No entries to show"), | 
            
            
              | 262 | 
                                  infoFiltered: this.$__(  | 
            
            
              | 263 | 
                                      "(filtered from _MAX_ total entries)"  | 
            
            
              | 264 | 
                                  ),  | 
            
            
              | 265 | 
                                  lengthMenu: this.$__("Show _MENU_ entries"), | 
            
            
              | 266 | 
                                  loadingRecords: this.$__("Loading..."), | 
            
            
              | 267 | 
                                  processing: this.$__("Processing..."), | 
            
            
              | 268 | 
                                  search: this.$__("Search:"), | 
            
            
              | 269 | 
                                  zeroRecords: this.$__("No matching records found"), | 
            
            
              | 270 | 
                                  buttons: { | 
            
            
              | 271 | 
                                      copyTitle: this.$__("Copy to clipboard"), | 
            
            
              | 272 | 
                                      copyKeys: this.$__(  | 
            
            
              | 273 | 
                                          "Press <i>ctrl</i> or <i>⌘</i> + <i>C</i> to copy the table data<br>to your system clipboard.<br><br>To cancel, click this message or press escape."  | 
            
            
              | 274 | 
                                      ),  | 
            
            
              | 275 | 
                                      copySuccess: { | 
            
            
              | 276 | 
                                          _: this.$__("Copied %d rows to clipboard"), | 
            
            
              | 277 | 
                                          1: this.$__("Copied one row to clipboard"), | 
            
            
              | 278 | 
                                      },  | 
            
            
              | 279 | 
                                  },  | 
            
            
              | 280 | 
                              },  | 
            
            
              | 281 | 
                              dom: '<"dt-info"i><"top pager"<"table_entries"lp><"table_controls"fB>>tr<"bottom pager"ip>',  | 
            
            
              | 282 | 
                              buttons: [  | 
            
            
              | 283 | 
                                  { | 
            
            
              | 284 | 
                                      fade: 100,  | 
            
            
              | 285 | 
                                      className: "dt_button_clear_filter",  | 
            
            
              | 286 | 
                                      titleAttr: this.$__("Clear filter"), | 
            
            
              | 287 | 
                                      enabled: false,  | 
            
            
              | 288 | 
                                      text:  | 
            
            
              | 289 | 
                                          '<i class="fa fa-lg fa-remove"></i> <span class="dt-button-text">' +  | 
            
            
              | 290 | 
                                          this.$__("Clear filter") + | 
            
            
              | 291 | 
                                          "</span>",  | 
            
            
              | 292 | 
                                      available: function (dt) { | 
            
            
              | 293 | 
                                          // The "clear filter" button is made available if this test returns true  | 
            
            
              | 294 | 
                                          if (dt.settings()[0].aanFeatures.f) { | 
            
            
              | 295 | 
                                              // aanFeatures.f is null if there is no search form  | 
            
            
              | 296 | 
                                              return true  | 
            
            
              | 297 | 
                                          }  | 
            
            
              | 298 | 
                                      },  | 
            
            
              | 299 | 
                                      action: function (e, dt, node) { | 
            
            
              | 300 | 
                                          dt.search("").draw("page") | 
            
            
              | 301 | 
                                          node.addClass("disabled") | 
            
            
              | 302 | 
                                      },  | 
            
            
              | 303 | 
                                  },  | 
            
            
              | 304 | 
                              ],  | 
            
            
              | 305 | 
                              lengthMenu: [  | 
            
            
              | 306 | 
                                  [10, 20, 50, 100, -1],  | 
            
            
              | 307 | 
                                  [10, 20, 50, 100, this.$__("All")], | 
            
            
              | 308 | 
                              ],  | 
            
            
              | 309 | 
                              pageLength: 20,  | 
            
            
              | 310 | 
                              fixedHeader: true,  | 
            
            
              | 311 | 
                              criteria: "contains",  | 
            
            
              | 312 | 
                              initComplete: function (settings) { | 
            
            
              | 313 | 
                                  var tableId = settings.nTable.id  | 
            
            
              | 314 | 
                                  var state = settings.oLoadedState  | 
            
            
              | 315 | 
                                  state && toggledClearFilter(state.search.search, tableId)  | 
            
            
              | 316 | 
                                  // When the DataTables search function is triggered,  | 
            
            
              | 317 | 
                                  // enable or disable the "Clear filter" button based on  | 
            
            
              | 318 | 
                                  // the presence of a search string  | 
            
            
              | 319 | 
                                  $("#" + tableId).on("search.dt", function (e, settings) { | 
            
            
              | 320 | 
                                      toggledClearFilter(  | 
            
            
              | 321 | 
                                          settings.oPreviousSearch.sSearch,  | 
            
            
              | 322 | 
                                          tableId  | 
            
            
              | 323 | 
                                      )  | 
            
            
              | 324 | 
                                  })  | 
            
            
              | 325 | 
                              },  | 
            
            
              | 326 | 
                          },  | 
            
            
              | 327 | 
                      }  | 
            
            
              | 328 | 
                  },  | 
            
            
              | 329 | 
                  setup() { | 
            
            
              | 330 | 
                      const { data, list, setOptions } = inject("tableStore") | 
            
            
              | 331 | 
                      const { setError, removeMessages, setWarning } = inject("mainStore") | 
            
            
              | 332 | 
                      return { data, list, setOptions, setError, removeMessages, setWarning } | 
            
            
              | 333 | 
                  },  | 
            
            
              | 334 | 
                  beforeMount() { | 
            
            
              | 335 | 
                      if (this.url) this.setOptions(this.url)  | 
            
            
              | 336 | 
                      if (this.edit || this.remove) { | 
            
            
              | 337 | 
                          this.tableColumns = [  | 
            
            
              | 338 | 
                              ...this.tableColumns,  | 
            
            
              | 339 | 
                              { | 
            
            
              | 340 | 
                                  name: "actions",  | 
            
            
              | 341 | 
                                  title: this.$__("Actions"), | 
            
            
              | 342 | 
                                  searchable: false,  | 
            
            
              | 343 | 
                                  render: (data, type, row) => { | 
            
            
              | 344 | 
                                      let content = ""  | 
            
            
              | 345 | 
                                      if (this.edit) { | 
            
            
              | 346 | 
                                          content +=  | 
            
            
              | 347 | 
                                              '<button class="edit btn"><i class="fa fa-edit"></i></button>'  | 
            
            
              | 348 | 
                                      }  | 
            
            
              | 349 | 
                                      if (this.remove) { | 
            
            
              | 350 | 
                                          content +=  | 
            
            
              | 351 | 
                                              '<button class="remove btn"><i class="fa fa-trash"></i></button>'  | 
            
            
              | 352 | 
                                      }  | 
            
            
              | 353 | 
                                      return content  | 
            
            
              | 354 | 
                                  },  | 
            
            
              | 355 | 
                              },  | 
            
            
              | 356 | 
                          ]  | 
            
            
              | 357 | 
                      }  | 
            
            
              | 358 | 
                      // this.dt = this.$refs.table.value.dt();  | 
            
            
              | 359 | 
                  },  | 
            
            
              | 360 | 
                  mounted() { | 
            
            
              | 361 | 
                      if (this.edit || this.remove) { | 
            
            
              | 362 | 
                          const dt = this.$refs.table.dt()  | 
            
            
              | 363 | 
                          const self = this  | 
            
            
              | 364 | 
                          dt.on("draw", () => { | 
            
            
              | 365 | 
                              const dataSet = dt.rows().data()  | 
            
            
              | 366 | 
                              dt.column(-1)  | 
            
            
              | 367 | 
                                  .nodes()  | 
            
            
              | 368 | 
                                  .to$()  | 
            
            
              | 369 | 
                                  .each(function (idx) { | 
            
            
              | 370 | 
                                      const data = dataSet[idx]  | 
            
            
              | 371 | 
                                      console.log(this)  | 
            
            
              | 372 | 
                                      $(".edit", this).on("click", () => { | 
            
            
              | 373 | 
                                          self.$emit("edit", data) | 
            
            
              | 374 | 
                                      })  | 
            
            
              | 375 | 
                                      $(".remove", this).on("click", () => { | 
            
            
              | 376 | 
                                          self.setWarning(  | 
            
            
              | 377 | 
                                              `<h3>${self.$__( | 
            
            
              | 378 | 
                                                  "Remove element"  | 
            
            
              | 379 | 
                                              )}</h3><p>${self.$__( | 
            
            
              | 380 | 
                                                  "Are you sure you want to remove this element?"  | 
            
            
              | 381 | 
                                              )}</p>`,  | 
            
            
              | 382 | 
                                              () => { | 
            
            
              | 383 | 
                                                  self.$emit("remove", data, () => { | 
            
            
              | 384 | 
                                                      dt.draw()  | 
            
            
              | 385 | 
                                                  })  | 
            
            
              | 386 | 
                                              }  | 
            
            
              | 387 | 
                                          )  | 
            
            
              | 388 | 
                                      })  | 
            
            
              | 389 | 
                                  })  | 
            
            
              | 390 | 
                          })  | 
            
            
              | 391 | 
                      }  | 
            
            
              | 392 | 
                  },  | 
            
            
              | 393 | 
                  beforeUnmount() { | 
            
            
              | 394 | 
                      const dt = this.$refs.table.dt()  | 
            
            
              | 395 | 
                      dt.destroy()  | 
            
            
              | 396 | 
                  },  | 
            
            
              | 397 | 
                  watch: { | 
            
            
              | 398 | 
                      errorMessage(newError) { | 
            
            
              | 399 | 
                          this.removeMessages()  | 
            
            
              | 400 | 
                          if (newError) this.setError(newError)  | 
            
            
              | 401 | 
                      },  | 
            
            
              | 402 | 
                  },  | 
            
            
              | 403 | 
                  components: { | 
            
            
              | 404 | 
                      DataTable,  | 
            
            
              | 405 | 
                  },  | 
            
            
              | 406 | 
                  props: { | 
            
            
              | 407 | 
                      url: { | 
            
            
              | 408 | 
                          type: String,  | 
            
            
              | 409 | 
                          default: "",  | 
            
            
              | 410 | 
                      },  | 
            
            
              | 411 | 
                      columns: { | 
            
            
              | 412 | 
                          type: Array,  | 
            
            
              | 413 | 
                          default: [],  | 
            
            
              | 414 | 
                      },  | 
            
            
              | 415 | 
                      edit: { | 
            
            
              | 416 | 
                          type: Boolean,  | 
            
            
              | 417 | 
                          default: true,  | 
            
            
              | 418 | 
                      },  | 
            
            
              | 419 | 
                      remove: { | 
            
            
              | 420 | 
                          type: Boolean,  | 
            
            
              | 421 | 
                          default: true,  | 
            
            
              | 422 | 
                      },  | 
            
            
              | 423 | 
                      options: { | 
            
            
              | 424 | 
                          type: Object,  | 
            
            
              | 425 | 
                          default: {}, | 
            
            
              | 426 | 
                      },  | 
            
            
              | 427 | 
                      default_filters: { | 
            
            
              | 428 | 
                          type: Object,  | 
            
            
              | 429 | 
                          required: false,  | 
            
            
              | 430 | 
                      },  | 
            
            
              | 431 | 
                  },  | 
            
            
              | 432 | 
              }  | 
            
            
              | 433 | 
              </script>  |