vue-laravel-crud 1.8.5 → 2.0.1

package/src/components/CrudTable.vue

@@ -0,0 +1,70 @@
+<template>
+  <div :class="['table-responsive', tableContainerClass]" v-if="displayMode == displayModes.MODE_TABLE">
+    <table :class="['table table-hover table-striped w-100', tableClass]">
+      <TableHeader />
+      
+      <draggable 
+        :list="items" 
+        :group="draggableGroup" 
+        tag="tbody" 
+        :draggable="orderable ? '.item' : '.none'"
+        @start="drag = true" 
+        @end="drag = false" 
+        @sort="onSort()" 
+        @add="onDraggableAdded($event)"
+        @change="onDraggableChange($event)" 
+        :options="draggableOptions"
+      >
+        <TableRow 
+          v-for="(item, index) in itemsList" 
+          v-bind:key="index"
+          :item="item"
+          :index="index"
+          :grouped="grouped"
+        />
+      </draggable>
+    </table>
+    
+    <p v-if="!loading && itemsList && itemsList.length == 0 && !infiniteScroll" class="p-3">
+      {{ messageEmptyResults }}
+    </p>
+  </div>
+</template>
+
+<script>
+import draggable from "vuedraggable";
+import TableHeader from './table/TableHeader.vue';
+import TableRow from './table/TableRow.vue';
+
+export default {
+  name: 'CrudTable',
+  components: {
+    draggable,
+    TableHeader,
+    TableRow
+  },
+  inject: [
+    'displayMode',
+    'displayModes',
+    'tableContainerClass',
+    'tableClass',
+    'items',
+    'draggableGroup',
+    'orderable',
+    'draggableOptions',
+    'itemsList',
+    'grouped',
+    'loading',
+    'infiniteScroll',
+    'messageEmptyResults',
+    'onSort',
+    'onDraggableAdded',
+    'onDraggableChange'
+  ],
+  data() {
+    return {
+      drag: false
+    };
+  }
+};
+</script>

package/src/components/kanban/KanbanBoard.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="kanban-board">
+    <div v-for="(column, colIndex) in items" :key="colIndex" class="kanban-column">
+      <KanbanColumn 
+        :column="column" 
+        :colIndex="colIndex"
+        :groupedAttribute="groupedAttribute"
+        :columns="columns"
+        :itemValue="itemValue"
+        :getStateValue="getStateValue"
+        :getArrayValue="getArrayValue"
+        :showItem="showItem"
+        :updateItem="updateItem"
+        :removeItem="removeItem"
+        :cardClass="cardClass"
+        :cardHideFooter="cardHideFooter"
+        @draggableChange="onDraggableChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import KanbanColumn from './KanbanColumn.vue';
+
+export default {
+  name: 'KanbanBoard',
+  components: {
+    KanbanColumn
+  },
+  inject: [
+    'items',
+    'groupedAttribute',
+    'columns',
+    'itemValue',
+    'getStateValue',
+    'getArrayValue',
+    'showItem',
+    'updateItem',
+    'removeItem',
+    'cardClass',
+    'cardHideFooter',
+    'onDraggableChange'
+  ]
+};
+</script>
+
+<style scoped>
+.kanban-board {
+  display: flex;
+  gap: 1rem;
+  overflow-x: auto;
+  padding: 1rem;
+}
+
+.kanban-column {
+  background: #f4f5f7;
+  border-radius: 8px;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  min-width: 300px;
+}
+</style>

package/src/components/kanban/KanbanCard.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="kanban-card">
+    <b-card 
+      :title="item.title || item.name || `Item ${item.id}`" 
+      tag="article" 
+      class="mb-2 card-crud" 
+      :class="cardClass" 
+      :hide-footer="cardHideFooter"
+    >
+      <slot name="card" v-bind:item="item">
+        <div v-for="(column, indexc) in columns" :key="indexc">
+          <b-card-text v-if="column.type !== 'actions' && column.prop !== 'id'">
+            <small class="text-muted">{{ column.label }}:</small>
+            <div class="mb-1">
+              <slot :name="'cell-' + column.prop" v-bind:item="item" v-bind:index="index" v-bind:itemindex="index"
+                v-bind:columnindex="indexc">
+                <span v-if="column.type === 'boolean'">
+                  <b-badge variant="success" v-if="itemValue(column, item)"><b-icon-check-circle></b-icon-check-circle></b-badge>
+                  <b-badge variant="danger" v-else><b-icon-x-circle></b-icon-x-circle></b-badge>
+                </span>
+                <span v-else-if="column.type === 'date'">
+                  {{ itemValue(column, item) }}
+                </span>
+                <span v-else-if="column.type === 'state'">
+                  {{ getStateValue(itemValue(column, item), column.options) }}
+                </span>
+                <span v-else-if="column.type === 'array'">
+                  {{ getArrayValue(itemValue(column, item), column.displayProp, column.options) }}
+                </span>
+                <span v-else>
+                  {{ itemValue(column, item) }}
+                </span>
+              </slot>
+            </div>
+          </b-card-text>
+        </div>
+      </slot>
+      
+      <template v-slot:footer>
+        <b-button-group size="sm">
+          <slot name="rowAction" v-bind:item="item" v-bind:index="index" v-bind:showItem="showItem"
+            v-bind:updateItem="updateItem" v-bind:removeItem="removeItem">
+            <b-button variant="primary" @click="showItem(item.id, index)"><b-icon-eye></b-icon-eye></b-button>
+            <b-button variant="secondary" @click="updateItem(item.id, index)"><b-icon-pencil></b-icon-pencil></b-button>
+            <b-button variant="danger" @click="removeItem(item.id, index)"><b-icon-trash></b-icon-trash></b-button>
+          </slot>
+        </b-button-group>
+      </template>
+    </b-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'KanbanCard',
+  props: {
+    item: Object,
+    columns: Array,
+    index: Number,
+    cardClass: String,
+    cardHideFooter: Boolean,
+    itemValue: Function,
+    getStateValue: Function,
+    getArrayValue: Function,
+    showItem: Function,
+    updateItem: Function,
+    removeItem: Function,
+  }
+};
+</script>
+
+<style scoped>
+.kanban-card {
+  background: #ffffff;
+  border-radius: 4px;
+  padding: 0.5rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  cursor: grab;
+  transition: box-shadow 0.2s ease;
+}
+
+.kanban-card:hover {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+}
+
+.kanban-card:active {
+  cursor: grabbing;
+}
+
+.card-crud {
+  border: 1px solid #e1e5e9;
+}
+
+.card-crud .card-title {
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+}
+
+.card-crud .card-text {
+  font-size: 0.8rem;
+  margin-bottom: 0.25rem;
+}
+</style>

package/src/components/kanban/KanbanColumn.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="kanban-column">
+    <div class="kanban-column-header">
+      <div class="d-flex justify-content-between align-items-center">
+        <span>{{ column.groupLabel }}</span>
+        <b-badge variant="secondary">{{ column.items.length }}</b-badge>
+      </div>
+    </div>
+
+    <draggable 
+      v-model="column.items" 
+      group="kanban" 
+      class="kanban-column-body" 
+      @end="onDragEnd"
+      :data-column="column.groupKey"
+    >
+      <div v-for="(item, itemIndex) in column.items" v-bind:key="itemIndex" class="item">
+        <slot name="card" v-bind:item="item">
+          <KanbanCard 
+            :key="itemIndex" 
+            :item="item" 
+            :columns="columns" 
+            :index="itemIndex"
+            :cardClass="cardClass" 
+            :cardHideFooter="cardHideFooter" 
+            :itemValue="itemValue"
+            :getStateValue="getStateValue" 
+            :getArrayValue="getArrayValue" 
+            :showItem="showItem"
+            :updateItem="updateItem" 
+            :removeItem="removeItem" 
+          />
+        </slot>
+      </div>
+    </draggable>
+  </div>
+</template>
+
+<script>
+import draggable from "vuedraggable";
+import KanbanCard from './KanbanCard.vue';
+
+export default {
+  name: 'KanbanColumn',
+  components: {
+    draggable,
+    KanbanCard
+  },
+  props: {
+    column: Object,
+    colIndex: Number,
+    groupedAttribute: String,
+    columns: Array,
+    itemValue: Function,
+    getStateValue: Function,
+    getArrayValue: Function,
+    showItem: Function,
+    updateItem: Function,
+    removeItem: Function,
+    cardClass: String,
+    cardHideFooter: Boolean
+  },
+  methods: {
+    onDragEnd(event) {
+      // Handle drag end for Kanban
+      if (event.added || event.moved) {
+        const item = event.item.__vue__.$parent.item || event.item.__vue__.item;
+        const newColumn = event.to.parentElement.getAttribute('data-column');
+        
+        if (item && newColumn) {
+          // Update the item's grouped attribute
+          item[this.groupedAttribute] = newColumn;
+          
+          // Emit the change event
+          this.$emit('draggableChange', event);
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.kanban-column {
+  background: #f4f5f7;
+  border-radius: 8px;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.kanban-column-header {
+  font-weight: bold;
+  padding: 0.5rem;
+  background: #dfe1e6;
+  border-radius: 8px 8px 0 0;
+  text-align: center;
+}
+
+.kanban-column-body {
+  padding: 0.5rem;
+  min-height: 100px;
+  background: #ffffff;
+  border-radius: 0 0 8px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+</style>

package/src/components/table/TableCell.vue

@@ -0,0 +1,91 @@
+<template>
+  <td :scope="column.prop == 'id' ? 'row' : ''">
+    <slot :name="'cell-' + column.prop" v-bind:item="item" v-bind:index="index" v-bind:itemindex="index"
+      v-bind:columnindex="columnIndex">
+      <span v-if="column.type == 'boolean'">
+        <b-badge variant="success" v-if="itemValue(column, item) == 'true' ||
+          itemValue(column, item) == 1 ||
+          itemValue(column, item) == '1'
+        "><b-icon-check-circle></b-icon-check-circle></b-badge>
+        <b-badge variant="danger" v-if="!itemValue(column, item) ||
+          itemValue(column, item) == '0' ||
+          itemValue(column, item) == 'false'
+        "><b-icon-x-circle></b-icon-x-circle></b-badge>
+      </span>
+      <span v-else-if="column.type == 'date'">
+        {{
+          itemValue(column, item)
+            ? moment(itemValue(column, item)).format(
+              column.format ? column.format : 'L LT'
+            )
+            : itemValue(column, item)
+        }}
+      </span>
+      <span v-else-if="column.type == 'select'">
+        <b-form-checkbox v-model="item.selected" @change="onCheckSelect($event, item)">
+        </b-form-checkbox>
+      </span>
+      <span v-else-if="column.type == 'state' && optionsLoaded">
+        {{
+          getStateValue(itemValue(column, item), column.options)
+        }}
+      </span>
+      <span v-else-if="column.type == 'array' && optionsLoaded">
+        {{
+          getArrayValue(
+            itemValue(column, item),
+            column.displayProp,
+            column.options
+          )
+        }}
+      </span>
+      <span v-else>
+        {{ itemValue(column, item) }}
+      </span>
+    </slot>
+
+    <b-button-group v-if="column.type == 'actions'">
+      <slot name="rowAction" v-bind:item="item" v-bind:index="index" v-bind:showItem="showItem"
+        v-bind:updateItem="updateItem" v-bind:removeItem="removeItem">
+        <b-button variant="primary" @click="showItem(item.id, index)">
+          <b-icon-eye></b-icon-eye>
+        </b-button>
+        <b-button variant="secondary" @click="updateItem(item.id, index)">
+          <b-icon-pencil></b-icon-pencil>
+        </b-button>
+        <b-button variant="danger" @click="removeItem(item.id, index)">
+          <b-icon-trash></b-icon-trash>
+        </b-button>
+      </slot>
+    </b-button-group>
+  </td>
+</template>
+
+<script>
+import moment from "moment";
+
+export default {
+  name: 'TableCell',
+  props: {
+    column: Object,
+    item: Object,
+    index: Number,
+    columnIndex: Number
+  },
+  inject: [
+    'itemValue',
+    'getStateValue',
+    'getArrayValue',
+    'onCheckSelect',
+    'showItem',
+    'updateItem',
+    'removeItem',
+    'optionsLoaded'
+  ],
+  data() {
+    return {
+      moment: moment
+    };
+  }
+};
+</script>

package/src/components/table/TableHeader.vue

@@ -0,0 +1,145 @@
+<template>
+  <thead class="thead-light">
+    <tr>
+      <slot name="rowHead">
+        <th v-for="(column, indexc) in columns" :key="indexc"
+          :style="{ width: column.width ? column.width : 'inherit' }" scope="col"
+          @mouseenter="hoveredColumn = column.prop"
+          @mouseleave="hoveredColumn = null">
+          <slot :name="'filter-' + column.prop" v-bind:column="column" v-bind:filter="filter"
+            v-bind:internalFilterByProp="internalFilterByProp" v-if="enableFilters &&
+              filtersVisible &&
+              isColumnHasFilter(column) &&
+              internalFilterByProp(column.prop)
+            ">
+
+            <div class="form-group">
+              <select v-if="column.type == 'boolean'" class="form-control form-control-md p-2"
+                v-model="internalFilterByProp(column.prop).value" @change="onChangeFilter($event)">
+                <option value="">{{ column.label }}</option>
+                <option value="1">Sí</option>
+                <option value="0">No</option>
+              </select>
+
+              <div class="row" v-else-if="column.type == 'date'">
+                <div class="col-6">
+                  <b-form-datepicker v-model="internalFilterByProp(column.prop + '_from').value
+                    " today-button reset-button close-button locale="es"
+                    class="form-control-md p-2"></b-form-datepicker>
+                </div>
+                <div class="col-6">
+                  <b-form-datepicker v-model="internalFilterByProp(column.prop + '_to').value
+                    " today-button reset-button close-button locale="es"
+                    class="form-control-md p-2"></b-form-datepicker>
+                </div>
+              </div>
+
+              <select v-else-if="column.type == 'state' && optionsLoaded" class="form-control form-control-md p-2"
+                v-model="internalFilterByProp(column.prop).value" @change="onChangeFilter($event)"
+                :placeholder="column.label">
+                <option value="">{{ column.label }}</option>
+                <option :value="option.id" v-for="(option, indexo) in column.options" :key="indexo">
+                  {{
+                    option.text
+                      ? option.text
+                      : option.label
+                        ? option.label
+                        : ""
+                  }}
+                </option>
+              </select>
+
+              <select v-else-if="column.type == 'array' && optionsLoaded" class="form-control form-control-md p-2"
+                v-model="internalFilterByProp(column.prop).value" @change="onChangeFilter($event)"
+                :placeholder="column.label">
+                <option value="">{{ column.label }}</option>
+                <option :value="option.id" v-for="(option, indexo) in column.options" :key="indexo">
+                  {{
+                    option.text
+                      ? option.text
+                      : option.label
+                        ? option.label
+                        : ""
+                  }}
+                </option>
+              </select>
+
+              <b-form-checkbox v-else-if="column.type == 'checkbox'" name="select-all"
+                @change="toggleAll($event)">
+              </b-form-checkbox>
+
+              <b-form-checkbox v-else-if="column.type == 'select'" name="select-all" @change="toggleAll($event)">
+              </b-form-checkbox>
+
+              <input v-else class="form-control form-control-md p-2"
+                v-model="internalFilterByProp(column.prop).value" :placeholder="column.label"
+                @change="onChangeFilter($event)" />
+
+            </div>
+          </slot>
+          <span v-else-if="column.type == 'select'">
+            <b-form-checkbox name="select-all" @change="toggleAll($event)"></b-form-checkbox>
+          </span>
+          <span v-else>{{ column.label }}</span>
+
+          <span
+            v-if="isSortableColumn(column) && shouldShowSortIcon(column)"
+            class="sort-filter" @click="toggleSortFilter(column)">
+            <b-icon-sort-up
+              v-if="getSortIconDirection(column) === 'up'"></b-icon-sort-up>
+            <b-icon-sort-down
+              v-if="getSortIconDirection(column) === 'down'"></b-icon-sort-down>
+          </span>
+        </th>
+      </slot>
+    </tr>
+  </thead>
+</template>
+
+<script>
+export default {
+  name: 'TableHeader',
+  inject: [
+    'columns',
+    'enableFilters',
+    'filtersVisible',
+    'isColumnHasFilter',
+    'internalFilterByProp',
+    'onChangeFilter',
+    'toggleAll',
+    'toggleSortFilter',
+    'sortable',
+    'optionsLoaded'
+  ],
+  data() {
+    return {
+      hoveredColumn: null
+    };
+  },
+  methods: {
+    isSortableColumn(column) {
+      return this.sortable && 
+             column.type != 'select' && 
+             column.type != 'checkbox' && 
+             this.internalFilterByProp(column.prop + '_sort');
+    },
+    shouldShowSortIcon(column) {
+      const sortFilter = this.internalFilterByProp(column.prop + '_sort');
+      return this.hoveredColumn === column.prop || sortFilter.value;
+    },
+    getSortIconDirection(column) {
+      const sortFilter = this.internalFilterByProp(column.prop + '_sort');
+      const sortValue = sortFilter.value;
+      
+      if (sortValue === 'DESC') {
+        return 'down';
+      } else if (sortValue === 'ASC') {
+        return 'up';
+      } else if (this.hoveredColumn === column.prop) {
+        return 'up';
+      }
+      return null;
+    }
+  }
+};
+</script>

package/src/components/table/TableRow.vue

@@ -0,0 +1,43 @@
+<template>
+  <tr 
+    @mouseover="onRowHover(item, index)" 
+    @click="onRowClick(item, index)" 
+    :class="['item', { 'selected': item.selected }]"
+  >
+    <th :colspan="columns.length" v-if="grouped && item.crudgroup">
+      <span>{{ item.crudgrouplabel }}</span>
+    </th>
+
+    <slot name="row" v-bind:item="item" v-else>
+      <TableCell 
+        v-for="(column, indexc) in columns" 
+        :key="indexc"
+        :column="column"
+        :item="item"
+        :index="index"
+        :columnIndex="indexc"
+      />
+    </slot>
+  </tr>
+</template>
+
+<script>
+import TableCell from './TableCell.vue';
+
+export default {
+  name: 'TableRow',
+  components: {
+    TableCell
+  },
+  props: {
+    item: Object,
+    index: Number,
+    grouped: Boolean
+  },
+  inject: [
+    'columns',
+    'onRowHover',
+    'onRowClick'
+  ]
+};
+</script>