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:
Suraj Rajput 2021-05-08 19:06:41 +05:30 committed by GitHub
parent 055008cf03
commit 7f6abdc987
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 13 deletions

View file

@ -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,

View file

@ -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>

View file

@ -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>