This is a plugin for the Vuex-ORM library.

Installation

Simply reference the github project in your package.json

dependencies: {
    ...
    "vuexorm-softdelete-plugin": "git+https://github.com/tvillaren/vuexorm-softdelete-plugin.git"
    ...
}

and run npm install.

Then, you need to install the plugin as any VuexORM plugin. In your store initialization code, simply add:

import VuexORMSoftDeletePlugin from 'vuexorm-softdelete-plugin';

and then

VuexORM.use(VuexORMSoftDeletePlugin);

Usage

The plugin adds a softDelete action / mutation that has the same interface as Vuex ORM Delete method.

Soft-deleting

By Primary Key Value

You can soft-delete by passing a PK directly or through a where condition:

// Initial state.
let state = {
    entities: {
        users: {
            '1': { id: 1, name: 'John' },
            '2': { id: 1, name: 'Jane' }
        }
    }
};

// Delete single data by primary key value with model class.
User.softDelete(1);

// Or you can pass object as argument as well.
User.softDelete({ where: 1 });

// Or you can delete data from an existing model instance.
const user = await User.find(1)
user.softDelete()

// Or you can delete single data by primary key value with vuex action.
store.dispatch('entities/users/softDelete', 1)

// Or you can pass obejct as argument as well.
store.dispatch('entities/users/softDelete', { where: 1 })

// State after `delete`
state = {
  entities: {
    users: {
      '1': { id: 1, name: 'John', $isDeleted: true, deleted_at: ... /* JS Date of deletion */ },
      '2': { id: 1, name: 'Jane' }
    }
  }
}

By Data Closure

You can soft-delete by passing a condition on the record:

// Initial state.
let state = {
    entities: {
        users: {
            '1': { id: 1, name: 'John' },
            '2': { id: 1, name: 'Jane' },
            '3': { id: 1, name: 'George' }
        }
    }
};

// Delete data by closure.
User.softDelete(record => {
    return record.id === 1 || record.name === 'Jane';
});

// Or with object style.
User.softDelete({
    where(record) {
        return record.id === 1 || record.name === 'Jane';
    }
});

// State after `delete`.
state = {
    entities: {
        users: {
            '1': { id: 1, name: 'John', $isDeleted: true, deleted_at: ... /* JS Date of deletion */ },
            '2': { id: 1, name: 'Jane', $isDeleted: true, deleted_at: ... /* JS Date of deletion */ },
            '3': { id: 1, name: 'George' }
        }
    }
};

$isDeleted flag and deleted_at key

As you can see on the examples above, soft-deleted entities are marked with a $isDeleted flag. Additionnally, the date of soft-deletion is stored in the deleted_at attribute.
Both can be custom-named through the plugin options.

Displaying soft-deleted data

Soft-deleted entities are still in the store but will not appear on queries unless you specifically ask to see trashed data:

allTrashed getter

This new getter returns all soft-deleted entities in the store.

It can be used globally:

// Returns an array of mixed types with all entities
// currently marked as deleted in the store
let results = store.getters['entities/allTrashed']();

or specifically to a type:

// Returns an array User entities currently marked as deleted in the store
let results = store.getters['entities/users/allTrashed']();

Query modifiers: withTrashed() and trashed()

When building a Vuex ORM query, soft-deleted entities will be hidden from the result by default.

• withTrashed() modifier
  Shows all entities, wether they are soft-deleted or not

const users = User.query()
    .withTrashed()
    .get(); // Returns all User data in the store

• trashed() modifier Shows only soft-deleted entities

const users = User.query()
    .trashed()
    .get(); // Returns all soft-deleted User data in the store

Plugin Options

You can override the default flag & key names by setting the corresponding options at plugin initialization.

| Option name | Description | Default value | | --------------------- | --------------------------------------------- | :-----------: | | flagName | Sets the name of the isDeleted flag | $isDeleted | | key | Sets the name of the deleted_at key | deleted_at | | exposeFlagsExternally | Adds the flags to the JSON stringified output | true |

In order to use those options, you can pass them as the second parameter of the install call:

VuexORM.use(VuexORMSoftDeletePlugin, {
    flagName: 'IsMarkedForDeletion',
    key: 'date_of_deletion',
    exposeFlagsExternally: true
});

License

This project is licensed under the MIT License - see the LICENSE.md file for details