I am trying to rearrange my MainHeader in Twilio. Trying to get rid of the Menu icon and the logo. Not sure if that is possible or not for the Menu icon but I tried hiding a Logo.
I tried following to hide the logo but it did not work.
import { VERSION } from '#twilio/flex-ui';
import { FlexPlugin } from '#twilio/flex-plugin';
import { ConnectorHelper } from './helpers/ConnectorHelper';
import ConnectorColorTheme from './theme/ConnectorColorTheme';
import reducers, { namespace } from './states';
import { StylesProvider, createGenerateClassName } from '#material-ui/core/styles';
import { FlexState } from '#twilio/flex-ui';
const PLUGIN_NAME = 'ConnectorPlugin';
const hideHeaderLogo = () => {
console.log("Hiding logo");
FlexState.ready().then(() => {
const { MainHeader } = FlexState;
MainHeader.setState({
showLogo: false
});
});
};
export default class ConnectorPlugin extends FlexPlugin {
constructor() {
super(PLUGIN_NAME);
}
async init(flex, manager) {
hideHeaderLogo();
const configuration = {
colorTheme: ConnectorColorTheme
};
apply theme
manager.updateConfig(configuration);
this.registerReducers(manager);
}
}
Related
I am having an issue with the following tech-stack:
Angular v8,
ionic Angular v5,
ngrx v8,
jasmine-marbles v0.8.3.
I am writing a unit test for "ngrx", in particular the "effects" part.
Following is my code snippet:
import { TestBed } from '#angular/core/testing';
import { provideMockActions } from '#ngrx/effects/testing';
import { Observable } from 'rxjs';
import { InformationEffects } from './information.effects';
import { HttpClientTestingModule, HttpTestingController } from '#angular/common/http/testing';
import { Storage } from '#ionic/storage';
import { DataService } from 'src/app/shared/services/data.service';
import { RouterTestingModule } from '#angular/router/testing';
import { cold, hot } from 'jasmine-marbles';
import { MockStore, provideMockStore } from '#ngrx/store/testing';
import {
InformationRequested,
InformationSuccess,
} from './information.actions';
describe('Information Effects', () => {
let information = {} as any;
const initialState = { information: information};
let actions$: Observable<any>;
let effects: InformationEffects;
let store: MockStore<any>;
let dataService;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpClientTestingModule, RouterTestingModule],
providers: [
{
provide: Storage,
},
InformationEffects,
MockStore,
provideMockStore({ initialState }),
provideMockActions(() => actions$),
{
provide: DataService,
useValue: jasmine.createSpyObj('DataService', ['getInformation'])
}
]
});
effects = TestBed.get(InformationEffects);
store = TestBed.get(MockStore);
dataService = TestBed.get(DataService);
});
it('should be created', () => {
expect(effects).toBeTruthy();
});
describe('INFORMATION_REQUESTED', () => {
it('should return an InformationSucess action, with the user, on success', () => {
let language = {} as any;
const action = new InformationRequested(language);
const outcome = new InformationSuccess(information);
actions$ = hot('-a-', { a: action });
const response = cold('-a|', { a: information });
const expected = cold('--b', { b: outcome });
dataService.getInformation.and.returnValue(response);
expect(effects.informationAction$).toBeObservable(expected);
});
});
});
When I run the test using "npm test", it failed at the "Received" part showing "?".
It says:
Expected: --b,
Received: --?,
Expected:
[{"frame":20,"notification":{"kind":"N","value":{"payload":{},"type":"[Information]
INFORMATION Success"},"hasValue":true}}]
Received:
[{"frame":20,"notification":{"kind":"N","value":{"payload":{},"type":"[Information]
INFORMATION Success"},"hasValue":true}}],
Please refer below figure:
enter image description here
I had searched the internet for this question mark in the "Received:" section, to no avail. I had also researched on each jasmine-marbles syntaxes, as well the (hot & cold) observable, to understand why & how to use it. Still no solution to get rid of the '?' question mark to have the unit-test being "Success". As such please help me.
I want to use vue3-cookies in my custom plugin, but whatever I do I keep getting undefined.
MyPlugin.js
export default {
install: (app, options) => {
app.config.globalProperties.$MyPlugin= {
someFunction() {
console.log(app.cookie);
console.log(app.cookies);
console.log(app.$cookies);
}
}
},
};
app.js
import {createApp} from 'vue';
import VueCookies from 'vue3-cookies'
import MyPlugin from "./plugins/MyPlugin";
const app = createApp({});
app.use(VueCookies)
app.use(MyPlugin)
const mountedApp = app.mount('#app');
What am I missing or doing wrong?
OK, I clearly missed a piece while reading the documentation.
This did the trick.
https://github.com/KanHarI/vue3-cookies#usage---via-composition-api-recommended
import {useCookies} from "vue3-cookies";
export default {
install: (app, options) => {
app.config.globalProperties.$MyPlugin = {
someFunction() {
const {cookies} = useCookies();
console.log(cookies.get('cookie_name'));
}
}
},
};
I am trying to implement KeyboardDatepicker inside ag grid's cell editor. When I select a date from the datepicker popup, the month value is shown incorrectly. The date I have selected is 30-04-2020 and the date it is showing is 30-30-2020. I tried using formatDate attribute to format the date as well. I am passing the selected value in proper format but the date is showing incorrectly. I am using date-io/moment version 1.3.13 and date-io/date-fns version 0.0.2. Anybody faced this issue before? I am sure this is a trivial issue and I am missing something. Any pointers would be much appreciated. Thanks in advance. Cheers!
Update:
Datepicker_component_grid.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { KeyboardDatePicker, MuiPickersUtilsProvider } from '#material-ui/pickers';
import DateFnsUtils from '#date-io/date-fns'
import moment from 'moment'
import format from 'date-fns/format'
import Grid from '#material-ui/core/Grid'
import { SampleDatePickerWithUtils } from '../Sample_datepicker_with_utils';
export class DateEditor extends Component {
constructor(props) {
super(props)
this.onDateChange = this.onDateChange.bind(this)
this.state = {
value: null
}
}
componentDidMount() {
}
componentWillUnmount() {
}
componentDidUpdate() {
this.focus()
}
focus() {
window.setTimeout(() => {
let dateContainer = ReactDOM.findDOMNode(this.refs.dateContainer)
if (dateContainer) {
dateContainer.focus()
}
})
}
getValue() {
return this.state.value
}
isPopup() {
return false
}
onDateChange(date) {
this.setState({
value: date
},
() => this.props.api.stopEditing()
)
}
render() {
let storeValue = this.props.value
return (
<span
ref='dateContainer'
tabIndex={1}>
<SampleDatePickerWithUtils labelName={' '} schemaLocation='rowDate' isDisabled={false}
displayFormat='yyyy-mm-dd'
disableFuture={false}
onDateChange={this.onDateChange}
disablePast={false}
storeVal={storeValue}
gridSize={{ sm: 2, md: 1, lg: 1 }}></SampleDatePickerWithUtils>
</span>
)
}
}
SampleDatePickerWithUtils.js
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles'
import { updateFieldState, onTabOut, updateFocus } from 'actions/ticket_actions';
import { bindActionCreators } from 'redux';
import { getGridSizing } from 'styles/Sample_core_theme';
import { DatePicker, KeyboardDatePicker, MuiPickersUtilsProvider } from '#material-ui/pickers';
import { formatToYMD } from 'core/schema_translators/utils';
import EventIcon from '#material-ui/icons/Event';
import DateFnsUtils from '#date-io/date-fns'
import { SampleFieldComponent } from './base_components';
import { registerComponent } from 'actions/Sample_core_actions';
import { connect } from 'react-redux';
const moment = require('moment');
class MyDateFnsUtils extends DateFnsUtils {
startOfMonth(date) {
let dat = moment(date).startOf('month').toDate()
return dat
}
}
class _SampleDatePickerWithUtils extends SampleFieldComponent {
constructor(props) {
super(props);
let formattedDate = props.storeVal ? formatToYMD(props.storeVal) : null
this.state = {
value: formattedDate,
errorMsg: '',
isError: false,
}
this.styleProps = { disableUnderline: true }
this.inputLabelProps = { shrink: true }
this.onChangeCallback = this.onChangeCallback.bind(this)
// this.onBlurCallback = this.onBlurCallback.bind(this)
props.registerComponent(props.schemaLocation)
}
componentWillMount() {
this.props.registerComponent(this.props.schemaLocation)
if (this.props.manageValueManually) {
let dateValue = this.props.overriddenValue ? formatToYMD(this.props.overriddenValue) : null
this.props.updateFieldState(this.props.schemaLocation, dateValue)
}
}
componentDidMount() {
if (this.props.focusField) { this.focusDomElement() }
}
componentWillReceiveProps(nextProps) {
if (this.props.manageValueManually) {
if (nextProps.overriddenValue !== this.props.overriddenValue) {
let dateValue = nextProps.overriddenValue ? formatToYMD(nextProps.overriddenValue) : null
this.props.updateFieldState(this.props.schemaLocation, dateValue)
this.props.onTabOut(this.props.schemaLocation)
}
}
}
onChangeCallback(date) {
let formattedDate = date ? formatToYMD(date) : null
if (!this.props.manageValueManually) {
this.props.updateFieldState(this.props.schemaLocation, formattedDate)
this.props.onTabOut(this.props.schemaLocation) //this is required because the value is selected in a date picker
}
this.props.onDateChange(formattedDate)
}
render() {
const gridSizing = getGridSizing(this.props)
const { classes } = this.props
return (
<MuiPickersUtilsProvider utils={MyDateFnsUtils}>
<KeyboardDatePicker
keyboard={(!this.props.isDisabled).toString()}
keyboardIcon={<EventIcon style={{ fontSize: '22px', color: 'red' }} />}
clearable
disabled={this.props.isDisabled}
error={this.state.isError}
helperText={this.state.errorMsg}
InputProps={{ className: classes.inputProps }}
label={this.props.labelName === '' ? this.props.schemaLocation : this.props.labelName}
value='2020-04-30'
onChange={this.onChangeCallback}
// format={this.props.displayFormat}
format='yyyy-mm-dd'
onBlur={this.onBlurCallback}
InputLabelProps={this.inputLabelProps}
disableFuture={this.props.disableFuture}
disablePast={this.props.disablePast}
/>
</MuiPickersUtilsProvider>
);
}
}
const styles = (theme) => ({
inputProps: {
marginTop: '0px !important',
// fontSize: '14px',
border: 0,
'& input': {
fontSize: '14px',
'&:focus': {
boxSizing: 'content-box'
}
}
}
})
const SampleDatePickerWithUtils = withStyles(styles)(_SampleDatePickerWithUtils)
export { SampleDatePickerWithUtils }
Using KeyboardDatePicker with moment the format I use is
format = {moment.localeData().longDateFormat('L')} // In my case dd/mm/yyyy
If you want to use a different locale you can require it first and use it
require("moment/locale/en-us");
moment().locale("en-us");
format = {moment().locale(locale).localeData().longDateFormat('L')}
For the value I use moment date when the date has a value and null otherwise
value={date ? moment(date) : null}
and for the onChange I'm using universal format as I don't want to store it in locale format
{(date: any) => handleChange(path, date?.format('YYYY-MM-DD'))}
In ionic 4 or 5, tabbar is not hided on subpages.
Of course, it works well in ionic 2 or 3.
Please let me know how to solve this issue.
This is my solution.
But hope the best solution.
create TabsService
import this in app.module.ts
Here is full code of TabsService
import { Injectable } from '#angular/core';
import { filter } from 'rxjs/operators';
import { NavigationEnd, Router } from '#angular/router';
import { Platform } from '#ionic/angular';
#Injectable({
providedIn: 'root'
})
export class TabsService {
constructor(private router: Router, private platform: Platform) {
this.platform.ready().then(() => {
this.navEvents();
});
}
public hideTabs() {
const tabBar = document.getElementById('kidesiaTabBar');
if (tabBar && tabBar.style.display !== 'none') {
tabBar.style.display = 'none';
}
}
public showTabs() {
const tabBar = document.getElementById('kidesiaTabBar');
if (tabBar && tabBar.style.display !== 'flex') {
tabBar.style.display = 'flex';
}
}
private navEvents() {
this.router.events
.pipe(filter(e => e instanceof NavigationEnd))
.subscribe((e: any) => {
this.showHideTabs(e);
});
}
private showHideTabs(e: any) {
const urlArray = e.url.split('/');
if (urlArray.length >= 3) {
let shouldHide = true;
if (urlArray.length === 3 && urlArray[1] === 'tabs') {
shouldHide = false;
}
try {
setTimeout(() => (shouldHide ? this.hideTabs() : this.showTabs()), 300);
} catch (err) {}
}
}
}
I'm using Ioni v4Beta and I'm traying to update the sidemenu when the user is login.
I search but the usual solution is use Events:
Ionic 3 refresh side menu after login
https://ionicframework.com/docs/api/util/Events/
But in the new version I don't find it, and I don't know how to do it
https://beta.ionicframework.com/docs/api
Thanks a lot, but I finally find how to import it:
import { Events } from '#ionic/angular';
Example on how to do it with subjects:
export const someEvent:Subject = new Subject();
export class ReceivingClass implements OnDestroy, OnInit
{
private someEventSubscription:Subscription;
public OnInit():void{
someEventSubscription = someEvent.subscribe((data) => console.log(data);
}
public onDestroy():void{
someEvent.unsubscribe();
}
}
export class SendingClass implements OnInit
{
public OnInit():void{
setTimeout(() => {
someEvent.next('hi');
}, 500);
}
}
Are you aware that Ionic v4 events will be deprecated soon?
I was also trying to update the sidemenu when a user logs in as well, so i tried using: import { Events } from '#ionic/angular';
However I got a warning referring me to this link https://angular.io/guide/observables#basic-usage-and-terms which I failed to follow because am not that familiar with observables.
After much research I found that I can still use events but I had to import them from angular's router directive.
This was my code before:
/* import was */
import { Events } from '#ionic/angular';
import { Storage } from '#ionic/storage';//ignore this import if doesn't apply to your code
/* inside the class */
constructor(
private events: Events,
private storage: Storage
) {
this.events.subscribe("updateMenu", () => {
this.storage.ready().then(() => {
this.storage.get("userLoginInfo").then((userData) => {
if (userData != null) {
console.log("User logged in.");
let user = userData.user;
console.log(user);
}
else {
console.log("No user found.");
let user = {};
}
}).catch((error)=>{
console.log(error);
});
}).catch((error)=>{
console.log(error);
});
});
}
changes i made that actually got my code working and deprecation warning gone:
/* import is now */
import { Router,RouterEvent } from '#angular/router';
import { Storage } from '#ionic/storage';//ignore this import if it does't apply to your code
Rest of code
constructor(
public router: Router,
public storage: Storage
){
this.router.events.subscribe((event: RouterEvent) => {
this.storage.ready().then(() => {
this.storage.get("userLoginInfo").then((userData) => {
if (userData != null) {
/*console.log("User logged in.");*/
let user = userData.user;
/*console.log(this.user);*/
}
else {
/*console.log("No user found.");*/
let user = {};
}
}).catch((error)=>{
console.log(error);
});
}).catch((error)=>{
console.log(error);
});
});
}
I got the idea after seeing this https://meumobi.github.io/ionic/2018/11/13/side-menu-tabs-login-page-ionic4.html. I hope my answer can be useful.
Steps to resolve the issue
import events in login page and in sidemenu view
In login page, after login success do your logic to publish the events.
for eg:
this.authService.doLogin(payload).subscribe((response) => {
if (response.status) {
this.storage.set('IS_LOGGED_IN', true);
this.events.publish('user:login');
}
}, (error) => {
console.log(error);
});
In sidemenu view, create a listener to watch the events 'user:login'
for eg:
this.menus = [];
// subscribe events
this.events.subscribe('user:login', () => {
// DO YOUR LOGIC TO SET THE SIDE MENU
this.setSidemenu();
});
// check whether the user is logged in or not
checkIsUserloggedIn() {
let isLoggedIn = false;
if (this.storage.get('IS_LOGGED_IN') == '' ||
this.storage.get('IS_LOGGED_IN') == null ||
this.storage.get('IS_LOGGED_IN') == undefined) {
isLoggedIn = false;
} else {
isLoggedIn = true;
}
return isLoggedIn;
}
// to set your sidemenus
setSidemenu() {
let isUserLoggedIn = this.checkIsUserloggedIn();
if(isUserLoggedIn) {
this.menus = ['Home', 'Aboutus', 'Contactus', 'My Profile', 'Logout'];
} else {
this.menus = ['Login', 'Home', 'Aboutus', 'Contactus'];
}
}