SLDS Select (UI Module)

SLDS Select


Same like we did it for SLDS Input let's create SLDS Select UI component.

.../slds-select.component.html
<div class="slds-form-element">
    <label class="slds-form-element__label" [for]="idPrefix+'_select-id'">{{label}}</label>
    <div class="slds-form-element__control">
        <div class="slds-select_container">
            <select
                [ngModel]="value"
                (ngModelChange)="onValueChange($event)"
                [id]="idPrefix+'_select-id'"
                [name]="name"
                class="slds-select" >
                <option [ngValue]="null">-select-</option>
                <option *ngFor="let op of options" [ngValue]="op.value">{{op.label}}</option>
            </select>
        </div>
    </div>
</div>

.../slds-select.component.ts
import { Component, OnInit, Input, Output, EventEmitter, forwardRef } from '@angular/core';
import { getRandomString } from '../../utils';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';


@Component({
    selector: 'slds-select',
    templateUrl: './slds-select.component.html',
    styleUrls: ['./slds-select.component.scss'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => SldsSelectComponent),
            multi: true
        }
    ]
})
export class SldsSelectComponent implements ControlValueAccessor {

    @Input() label = '<No label>';
    @Input() name: string;
    @Input() required = false;
    @Input() disabled = false;
    @Input() options: string[] = [];  // [{value: ..., label: ...}]
    @Output() valueChange = new EventEmitter();

    idPrefix = '';
    value: string;

    constructor() {
        this.idPrefix = getRandomString();
    }

    writeValue(value: any): void {
        this.value = value;
    }

    propagateChange = (_: any) => {};

    registerOnChange(fn: any): void {
        this.propagateChange = fn;
    }

    registerOnTouched(fn: any): void {

    }

    onValueChange(newValue: any) {
        this.value = newValue;
        this.propagateChange(this.value);
    }

}

Usage example:
<slds-modal
    *ngIf="showSFDCOrgTypeSelect"
    title="Salesforce OAuth Setup">
    <modal-content>
        <slds-select
            [(ngModel)]="orgType"
            [options]="orgTypeOptions"
            label="Salesforce Organization Type"
            required="true"></slds-select>
    </modal-content>
    <modal-actions>
        <button class="slds-button slds-button_neutral" (click)="showSFDCOrgTypeSelect = false;">Cancel</button>
        <button class="slds-button slds-button_brand" [disabled]="!orgType" (click)="setupSalesforceConnectionStep2()">Connect</button>
    </modal-actions>
</slds-modal>

Comments

Post a Comment

Popular posts from this blog

HTTPS in local environment for Angular + Flask project.

Image
Sometimes it is important to run project in local environment with HTTPS. For example when you use third party authentication system in our app. In my case I prefer to have local instance similar as mush as possible to the production. Moreover, it’s easy to implement. First what you need is the ssl key. You can follow this article to create it https://devcenter.heroku.com/articles/ssl-certificate-self Create your ssl key in ./key project folder. Finally it should look like this [dmnbrest@~/Documents/myPython/blog2/project/key]$ ls server.crt server.csr server.key Add HTTPS support to the FLASK: Update init section in your backend server file ( ./backend/app.py ) this way if __name__ == "__main__":     context = ('./key/server.crt', './key/server.key')     app.run(ssl_context=context, host='0.0.0.0', debug=True) But now we need to run backend with other command python ./backend/app.py This time you should see this output in ...
Read more

Task schedule configuration (Cron-like)

Image
I've rethink schedule run flow and decide to focus on Cron like style. User can still select from simple options like 10 mins, 1 hour, 1 day but they will be stored in Cron format. I found great python lib to simplify this work - Croniter ( https://github.com/kiorky/croniter ). It allows us to validate cron expression and calculate next run time. In scheduler we will check next run time and start task processing if time is less or equal and task status is "waiting". ./backend/controllers/task.py ... @task_bp.route('/start', methods=['POST']) @login_required def start_tasks(): task_payload = request.get_json() task = Task.query.filter(Task.id == task_payload['id'], Task.user_id == current_user.id).first_or_404() if not task.config or not croniter.is_valid(task.config['trigger_value']) : abort(400, 'Invalid Trigger Setup') task.status = 'waiting' base = datetime.now...
Read more

Salesforce Lightning Design System (SLDS)

Image
At this moment our UI looks ugly without any styles. To make it looks better we can to use any of existing CSS frameworks. I tried Bootstrap ( https://getbootstrap.com/ ), Foundation ( https://get.foundation/ ), UIkit ( https://getuikit.com/ ). But as a Salesforce developer I found SLDS ( https://www.lightningdesignsystem.com/ ) is closer to my heart. Let's add it to our project. Download last SLDS (current version is 2.11.6) from https://www.lightningdesignsystem.com/downloads/ Extract it to the ./backend/static/slds folder. There are few other ways to add SLDS to the project: - from NPM in the Angular subproject. But in this case it can be accessible by Angular only and is compiled as part of the result bundle. But we have Flask project as global playground and few pages (like /auth/login) should work out of the angular context but have the same look. - external CDN (like  https://cdnjs.com/ ). I like this approach and use it often during development time, but ...
Read more