fix: Add plus icon in sidebar items to settings create page (#2141)
* [Issue-#1965] Add changes * Added newLink prop with default value true to show the new icon * Fix button alignment Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>
This commit is contained in:
parent
055008cf03
commit
7f6abdc987
3 changed files with 43 additions and 13 deletions
|
@ -144,6 +144,7 @@ export default {
|
||||||
cssClass: 'menu-title align-justify',
|
cssClass: 'menu-title align-justify',
|
||||||
toState: frontendURL(`accounts/${this.accountId}/settings/inboxes`),
|
toState: frontendURL(`accounts/${this.accountId}/settings/inboxes`),
|
||||||
toStateName: 'settings_inbox_list',
|
toStateName: 'settings_inbox_list',
|
||||||
|
newLinkRouteName: 'settings_inbox_new',
|
||||||
children: this.inboxes.map(inbox => ({
|
children: this.inboxes.map(inbox => ({
|
||||||
id: inbox.id,
|
id: inbox.id,
|
||||||
label: inbox.name,
|
label: inbox.name,
|
||||||
|
@ -158,10 +159,13 @@ export default {
|
||||||
icon: 'ion-pound',
|
icon: 'ion-pound',
|
||||||
label: 'LABELS',
|
label: 'LABELS',
|
||||||
hasSubMenu: true,
|
hasSubMenu: true,
|
||||||
|
newLink: true,
|
||||||
key: 'label',
|
key: 'label',
|
||||||
cssClass: 'menu-title align-justify',
|
cssClass: 'menu-title align-justify',
|
||||||
toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
|
toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
|
||||||
toStateName: 'labels_list',
|
toStateName: 'labels_list',
|
||||||
|
showModalForNewItem: true,
|
||||||
|
modalName: 'AddLabel',
|
||||||
children: this.accountLabels.map(label => ({
|
children: this.accountLabels.map(label => ({
|
||||||
id: label.id,
|
id: label.id,
|
||||||
label: label.title,
|
label: label.title,
|
||||||
|
@ -178,10 +182,12 @@ export default {
|
||||||
icon: 'ion-ios-people',
|
icon: 'ion-ios-people',
|
||||||
label: 'TEAMS',
|
label: 'TEAMS',
|
||||||
hasSubMenu: true,
|
hasSubMenu: true,
|
||||||
|
newLink: true,
|
||||||
key: 'team',
|
key: 'team',
|
||||||
cssClass: 'menu-title align-justify teams-sidebar-menu',
|
cssClass: 'menu-title align-justify teams-sidebar-menu',
|
||||||
toState: frontendURL(`accounts/${this.accountId}/settings/teams`),
|
toState: frontendURL(`accounts/${this.accountId}/settings/teams`),
|
||||||
toStateName: 'teams_list',
|
toStateName: 'teams_list',
|
||||||
|
newLinkRouteName: 'settings_teams_new',
|
||||||
children: this.teams.map(team => ({
|
children: this.teams.map(team => ({
|
||||||
id: team.id,
|
id: team.id,
|
||||||
label: team.name,
|
label: team.name,
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
<span
|
<span
|
||||||
v-if="showItem(menuItem)"
|
v-if="showItem(menuItem)"
|
||||||
class="child-icon ion-android-add-circle"
|
class="child-icon ion-android-add-circle"
|
||||||
@click.prevent="newLinkClick"
|
@click.prevent="newLinkClick(menuItem)"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
<ul v-if="menuItem.hasSubMenu" class="nested vertical menu">
|
<ul v-if="menuItem.hasSubMenu" class="nested vertical menu">
|
||||||
|
@ -52,6 +52,11 @@
|
||||||
</a>
|
</a>
|
||||||
</router-link>
|
</router-link>
|
||||||
</ul>
|
</ul>
|
||||||
|
<add-label-modal
|
||||||
|
v-if="showAddLabel"
|
||||||
|
:show.sync="showAddLabel"
|
||||||
|
:on-close="hideAddLabelPopup"
|
||||||
|
/>
|
||||||
</router-link>
|
</router-link>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -61,8 +66,17 @@ import { mapGetters } from 'vuex';
|
||||||
import router from '../../routes';
|
import router from '../../routes';
|
||||||
import adminMixin from '../../mixins/isAdmin';
|
import adminMixin from '../../mixins/isAdmin';
|
||||||
import { getInboxClassByType } from 'dashboard/helper/inbox';
|
import { getInboxClassByType } from 'dashboard/helper/inbox';
|
||||||
|
import AddLabelModal from '../../routes/dashboard/settings/labels/AddLabel';
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
AddLabelModal,
|
||||||
|
},
|
||||||
mixins: [adminMixin],
|
mixins: [adminMixin],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showAddLabel: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
menuItem: {
|
menuItem: {
|
||||||
type: Object,
|
type: Object,
|
||||||
|
@ -108,12 +122,24 @@ export default {
|
||||||
if (!child.truncateLabel) return false;
|
if (!child.truncateLabel) return false;
|
||||||
return child.label;
|
return child.label;
|
||||||
},
|
},
|
||||||
newLinkClick() {
|
newLinkClick(item) {
|
||||||
router.push({ name: 'settings_inbox_new', params: { page: 'new' } });
|
if (item.newLinkRouteName) {
|
||||||
|
router.push({ name: item.newLinkRouteName, params: { page: 'new' } });
|
||||||
|
} else if (item.showModalForNewItem) {
|
||||||
|
if (item.modalName === 'AddLabel') {
|
||||||
|
this.showAddLabelPopup();
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
showItem(item) {
|
showItem(item) {
|
||||||
return this.isAdmin && item.newLink !== undefined;
|
return this.isAdmin && item.newLink !== undefined;
|
||||||
},
|
},
|
||||||
|
showAddLabelPopup() {
|
||||||
|
this.showAddLabel = true;
|
||||||
|
},
|
||||||
|
hideAddLabelPopup() {
|
||||||
|
this.showAddLabel = false;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -37,7 +37,6 @@
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<div class="medium-12 columns">
|
|
||||||
<woot-submit-button
|
<woot-submit-button
|
||||||
:disabled="$v.title.$invalid || uiFlags.isCreating"
|
:disabled="$v.title.$invalid || uiFlags.isCreating"
|
||||||
:button-text="$t('LABEL_MGMT.FORM.CREATE')"
|
:button-text="$t('LABEL_MGMT.FORM.CREATE')"
|
||||||
|
@ -47,7 +46,6 @@
|
||||||
{{ $t('LABEL_MGMT.FORM.CANCEL') }}
|
{{ $t('LABEL_MGMT.FORM.CANCEL') }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</modal>
|
</modal>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue