79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
|
import Component from '@glimmer/component';
|
||
|
import { action } from '@ember/object';
|
||
|
import { tracked } from '@glimmer/tracking';
|
||
|
import { HTMLElementEvent } from 'forms';
|
||
|
import { format } from 'date-fns';
|
||
|
|
||
|
/**
|
||
|
* <PkiNotValidAfterForm /> components are used to manage two mutually exclusive role options in the form.
|
||
|
*/
|
||
|
interface Args {
|
||
|
model: {
|
||
|
notAfter: string;
|
||
|
ttl: string | number;
|
||
|
set: (key: string, value: string | number) => void;
|
||
|
};
|
||
|
}
|
||
|
|
||
|
export default class RadioSelectTtlOrString extends Component<Args> {
|
||
|
@tracked groupValue = 'ttl';
|
||
|
@tracked cachedNotAfter: string;
|
||
|
@tracked cachedTtl: string | number;
|
||
|
@tracked formDate: string;
|
||
|
|
||
|
constructor(owner: unknown, args: Args) {
|
||
|
super(owner, args);
|
||
|
const { model } = this.args;
|
||
|
this.cachedNotAfter = model.notAfter || '';
|
||
|
this.formDate = this.calculateFormDate(model.notAfter);
|
||
|
this.cachedTtl = model.ttl || '';
|
||
|
if (model.notAfter) {
|
||
|
this.groupValue = 'specificDate';
|
||
|
}
|
||
|
}
|
||
|
|
||
|
calculateFormDate(value: string) {
|
||
|
// API expects and returns full ISO string
|
||
|
// but the form input only accepts yyyy-MM-dd format
|
||
|
if (value) {
|
||
|
return format(new Date(value), 'yyyy-MM-dd');
|
||
|
}
|
||
|
return '';
|
||
|
}
|
||
|
|
||
|
@action onRadioButtonChange(selection: string) {
|
||
|
this.groupValue = selection;
|
||
|
// Clear the previous selection if they have clicked the other radio button.
|
||
|
if (selection === 'specificDate') {
|
||
|
this.args.model.ttl = '';
|
||
|
this.args.model.notAfter = this.cachedNotAfter;
|
||
|
this.formDate = this.calculateFormDate(this.cachedNotAfter);
|
||
|
}
|
||
|
if (selection === 'ttl') {
|
||
|
this.args.model.notAfter = '';
|
||
|
this.args.model.ttl = this.cachedTtl;
|
||
|
this.formDate = '';
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@action setAndBroadcastTtl(ttlObject: { enabled: boolean; goSafeTimeString: string }) {
|
||
|
const { enabled, goSafeTimeString } = ttlObject;
|
||
|
if (this.groupValue === 'specificDate') {
|
||
|
// do not save ttl on the model unless the ttl radio button is selected
|
||
|
return;
|
||
|
}
|
||
|
const ttlVal = enabled === true ? goSafeTimeString : 0;
|
||
|
this.cachedTtl = ttlVal;
|
||
|
this.args.model.ttl = ttlVal;
|
||
|
}
|
||
|
|
||
|
@action setAndBroadcastInput(evt: HTMLElementEvent<HTMLInputElement>) {
|
||
|
const setDate = evt.target.valueAsDate?.toISOString();
|
||
|
if (!setDate) return;
|
||
|
|
||
|
this.cachedNotAfter = setDate;
|
||
|
this.args.model.notAfter = setDate;
|
||
|
this.formDate = this.calculateFormDate(setDate);
|
||
|
}
|
||
|
}
|