[4.x] Filters refinements

resources/css/elements/badges.css

@@ -27,7 +27,7 @@
 }
 
 .filter-badge {
- @apply text-2xs text-gray-800 bg-white border flex items-center rounded-full;
+ @apply text-2xs text-gray-800 bg-white border border-dashed border-gray-600 flex items-center rounded-full;
  height: 1.625rem;
  padding-left: 10px;
 
@@ -44,6 +44,6 @@
  }
 
  &.filter-badge-control {
- @apply bg-gray-200 border border-gray-500 border-dashed hover:border-gray-600 hover:bg-gray-300;
+ @apply bg-gray-100 border border-solid rounded-full border-gray-500 hover:border-gray-600 hover:bg-gray-200;
  }
 }

resources/js/components/data-list/FieldFilter.vue

@@ -1,11 +1,11 @@
 <template>
  <div>
  <div v-if="hasAvailableFieldFilters">
- <div class="flex flex-col p-4">
+ <div class="flex flex-col p-3">
 
  <v-select
  ref="fieldSelect"
- :placeholder="__('Select field')"
+ :placeholder="__('Field')"
  :options="fieldOptions"
  :reduce="option => option.value"
  :value="field"

resources/js/components/data-list/FilterPresets.vue

@@ -1,34 +1,52 @@
 <template>
- <div class="pr-2">
+ <div class="pt-2 pr-2">
  <div class="flex flex-wrap items-center">
 
  <button class="pill-tab mr-1" :class="{ 'active': ! activePreset }" @click="viewAll" v-text="__('All')" />
 
  <template v-for="(preset, handle) in presets">
  <button class="pill-tab active mr-1" v-if="handle === activePreset">
  {{ preset.display }}
- <button class="opacity-50 hover:opacity-100" @click="showDeleteModal = true">
- <span class="w-2 h-2 ml-2 mr-1">&times;</span>
- </button>
+ <dropdown-list class="ml-2" placement="bottom-start">
+ <template v-slot:trigger>
+ <button class="opacity-50 hover:opacity-100">
+ <svg-icon name="micro/chevron-down-xs" class="w-2 h-2" />
+ </button>
+ </template>
+ <dropdown-item :text="__('Duplicate')" @click="createPreset" />
+ <dropdown-item :text="__('Rename')" @click="renamePreset" />
+ <div class="divider" />
+ <dropdown-item :text="__('Delete')" class="warning" @click="deletePreset" />
+ </dropdown-list>
  </button>
  <button class="pill-tab mr-1" v-else @click="viewPreset(handle)">
  {{ preset.display }}
  </button>
  </template>
 
- <button class="pill-tab" @click="createNewEmptyPreset" >
+ <button class="pill-tab" @click="createPreset" v-tooltip="__('Create New View')">
  <svg-icon name="add" class="w-3 h-3"/>
  </button>
  </div>
 
  <confirmation-modal
-:buttonText="__('Save')"
+v-if="showCreateModal"
  :title="__('Create New View')"
-v-if="showSaveModal"
- @cancel="showSaveModal = false"
- @confirm="handleSavePreset"
+:buttonText="__('Create')"
+ @cancel="showCreateModal = false"
+ @confirm="savePreset(savingPresetSlug)"
  >
- <text-input :focus="true" v-model="savingPresetName" @keydown.enter="handleSavePreset" />
+ <text-input :focus="true" v-model="savingPresetName" @keydown.enter="savePreset(savingPresetSlug)" />
+ </confirmation-modal>
+
+ <confirmation-modal
+ v-if="showRenameModal"
+ :title="__('Rename View')"
+ :buttonText="__('Rename')"
+ @cancel="showRenameModal = false"
+ @confirm="savePreset()"
+ >
+ <text-input :focus="true" v-model="savingPresetName" @keydown.enter="savePreset()" />
  </confirmation-modal>
 
  <confirmation-modal
@@ -58,8 +76,9 @@ export default {
  data() {
  return {
  presets: [],
+ showCreateModal: false,
+ showRenameModal: false,
  showDeleteModal: false,
- showSaveModal: false,
  savingPresetName: null,
  test: 'hello!'
  }
@@ -80,6 +99,10 @@ export default {
 
  return payload;
  },
+
+ savingPresetSlug() {
+ return this.$slugify(this.savingPresetName, '_');
+ },
  },
 
  created() {
@@ -98,69 +121,78 @@ export default {
  this.viewPreset(handle)
  },
 
- deletePreset() {
- this.$preferences.remove(`${this.preferencesKey}.${this.activePreset}`)
- .then(response => {
- this.$emit('deleted', this.activePreset);
- this.$toast.success(__('View deleted'));
- this.showDeleteModal = false;
- this.refreshPresets();
- })
- .catch(error => {
- this.$toast.error(__('Unable to delete view'));
- this.showDeleteModal = false;
- });
+ refreshPresets() {
+ this.getPresets();
+ this.viewAll();
  },
 
- savePreset() {
- if (!this.activePreset) {
- this.showSaveModal = true;
- return;
+ refreshPreset() {
+ if (this.activePreset) {
+ this.setPreset(this.activePreset);
+ } else {
+ this.viewAll();
  }
+ },
 
- this.handleSavePreset();
+ viewAll() {
+ this.$emit('reset');
  },
 
- createNewEmptyPreset() {
+ viewPreset(handle) {
+ this.$emit('selected', handle, this.presets[handle]);
+ },
+
+ createPreset() {
  this.savingPresetName = null;
- this.showSaveModal = true;
+ this.showCreateModal = true;
+ },
+
+ renamePreset() {
+ this.savingPresetName = this.activePresetPayload.display;
+ this.showRenameModal = true;
  },
 
- handleSavePreset() {
- let presetHandle = this.activePreset || this.$slugify(this.savingPresetName, '_');
+ savePreset(handle) {
+ let presetHandle = handle || this.activePreset;
+
+ if (! presetHandle) {
+ this.showCreateModal = true;
+ return;
+ }
 
  this.$preferences.set(`${this.preferencesKey}.${presetHandle}`, this.presetPreferencesPayload)
  .then(response => {
  this.$toast.success(__('View saved'));
- this.showSaveModal = false;
- this.getPresets();
- this.viewPreset(presetHandle);
- this.hasActiveFilters ? this.refreshPreset() : this.$emit('show-filters');
+ this.showCreateModal = false;
+ this.showRenameModal = false;
+ this.setPreset(presetHandle);
  })
  .catch(error => {
  this.$toast.error(__('Unable to save view'));
- this.showSaveModal = false;
+ this.showCreateModal = false;
+ this.showRenameModal = false;
  });
  },
 
- refreshPresets() {
- this.getPresets();
- this.viewAll();
- },
-
- refreshPreset() {
- this.getPresets();
- this.$emit('hide-filters');
- this.viewPreset(this.activePreset);
- },
+ deletePreset() {
+ if (! this.showDeleteModal) {
+ this.showDeleteModal = true;
+ return;
+ }
 
- viewAll() {
- this.$emit('reset');
+ this.$preferences.remove(`${this.preferencesKey}.${this.activePreset}`)
+ .then(response => {
+ this.$emit('deleted', this.activePreset);
+ this.$toast.success(__('View deleted'));
+ this.showDeleteModal = false;
+ this.refreshPresets();
+ })
+ .catch(error => {
+ this.$toast.error(__('Unable to delete view'));
+ this.showDeleteModal = false;
+ });
  },
 
- viewPreset(handle) {
- this.$emit('selected', handle, this.presets[handle]);
- },
  },
 
 }

resources/js/components/data-list/Filters.vue

@@ -1,12 +1,12 @@
 <template>
- <div class="w-full" v-if="isFiltering || isSearching">
- <div class="flex flex-wrap px-3 border-b pt-2">
+ <div class="shadow-inner bg-gray-300">
+ <div class="flex items-center flex-wrap px-3 border-b pt-2">
 
  <!-- Field filter (requires custom selection UI) -->
  <popover v-if="fieldFilter" placement="bottom-start" @closed="fieldFilterClosed">
  <template slot="trigger">
  <button class="filter-badge filter-badge-control mr-2 mb-2" @click="resetFilterPopover">
- {{ __('Field') }}
+ {{ fieldFilter.title }}
  <svg-icon name="micro/chevron-down-xs" class="w-2 h-2 mx-2" />
  </button>
  </template>
@@ -18,17 +18,7 @@
  :config="fieldFilter"
  :values="activeFilters.fields || {}"
  :badges="fieldFilterBadges"
- @changed="$emit('filter-changed', {handle: 'fields', values: $event})"
- @cleared="creating = false"
- @closed="closePopover"
- />
- <data-list-filter
- v-for="filter in standardFilters"
- v-if="creating === filter.handle"
- :key="filter.handle"
- :filter="filter"
- :values="activeFilters[filter.handle]"
- @changed="$emit('filter-changed', {handle: filter.handle, values: $event})"
+ @changed="$emit('changed', {handle: 'fields', values: $event})"
  @cleared="creating = false"
  @closed="closePopover"
  />
@@ -37,8 +27,8 @@
  </template>
  </popover>
 
- <!-- Standard non-field filters -->
- <popover v-if="standardFilters.length" v-for="filter in standardFilters" :key="filter.handle" placement="bottom-start">
+ <!-- Standard pinned filters -->
+ <popover v-if="pinnedFilters.length" v-for="filter in pinnedFilters" :key="filter.handle" placement="bottom-start" :stop-propagation="false">
  <template slot="trigger">
  <button class="filter-badge filter-badge-control mr-2 mb-2">
  {{ filter.title }}
@@ -51,13 +41,49 @@
  :key="filter.handle"
  :filter="filter"
  :values="activeFilters[filter.handle]"
- @changed="$emit('filter-changed', {handle: filter.handle, values: $event})"
+ @changed="$emit('changed', {handle: filter.handle, values: $event})"
  @closed="closePopover"
  />
  </div>
  </template>
  </popover>
 
+ <!-- Standard unpinned filters -->
+ <popover v-if="unpinnedFilters.length" placement="bottom-start" :stop-propagation="false">
+ <template slot="trigger">
+ <button class="filter-badge filter-badge-control mr-2 mb-2" @click="resetFilterPopover">
+ {{ __('Filter') }}
+ <svg-icon name="micro/chevron-down-xs" class="w-2 h-2 mx-2" />
+ </button>
+ </template>
+ <template #default="{ close: closePopover }">
+ <div class="filter-fields w-64">
+ <h6 v-text="creatingFilterHeader" class="p-3 pb-0" />
+ <div v-if="showUnpinnedFilterSelection" class="p-3 pt-1">
+ <button
+ v-for="filter in unpinnedFilters"
+ :key="filter.handle"
+ v-text="filter.title"
+ class="btn w-full mt-1"
+ @click="creating = filter.handle"
+ />
+ </div>
+ <div v-else>
+ <data-list-filter
+ v-for="filter in unpinnedFilters"
+ v-if="creating === filter.handle"
+ :key="filter.handle"
+ :filter="filter"
+ :values="activeFilters[filter.handle]"
+ @changed="$emit('changed', {handle: filter.handle, values: $event})"
+ @cleared="creating = false"
+ @closed="closePopover"
+ />
+ </div>
+ </div>
+ </template>
+ </popover>
+
  <!-- Active filter badges -->
  <div class="filter-badge mr-2 mb-2" v-for="(badge, handle) in fieldFilterBadges">
  <span>{{ badge }}</span>
@@ -132,6 +158,28 @@ export default {
  return this.filters.filter(filter => filter.handle !== 'fields');
  },
 
+ pinnedFilters() {
+ return this.standardFilters.filter(filter => filter.pinned);
+ },
+
+ unpinnedFilters() {
+ return this.standardFilters.filter(filter => ! filter.pinned);
+ },
+
+ creatingFilter() {
+ return _.find(this.unpinnedFilters, filter => filter.handle === this.creating);
+ },
+
+ creatingFilterHeader() {
+ let text = data_get(this.creatingFilter, 'title', 'Filter where');
+
+ return __(text) + ':';
+ },
+
+ showUnpinnedFilterSelection() {
+ return ! this.creating;
+ },
+
  fieldFilterBadges() {
  return data_get(this.activeFilterBadges, 'fields', {});
  },
@@ -207,11 +255,11 @@ export default {
 
  delete fields[handle];
 
- this.$emit('filter-changed', {handle: 'fields', values: fields});
+ this.$emit('changed', {handle: 'fields', values: fields});
  },
 
  removeStandardFilter(handle) {
- this.$emit('filter-changed', {handle: handle, values: null});
+ this.$emit('changed', {handle: handle, values: null});
  },
 
  save() {
@@ -233,12 +281,6 @@ export default {
  });
  },
 
- reset() {
- return this.activePreset
- ? this.$emit('restore-preset', this.activePreset)
- : this.$emit('reset');
- },
-
  remove() {
  this.$preferences.remove(this.preferencesKey)
  .then(response => {