firebase-auth-database-storage-typescript v0.1.7

CRUD ToDo example in Typescript

MVC with dependency injection

firebase signin

<signin-provider>
    <h1></h1>
</signin-provider>

ToDo CRUD Data Model and Controller

interface ICrud<T, K> {
    data: T[];
    Create(value: T, callback: (key: K) => void);
    Read(key: K, callback: (data: T) => void);
    //   ReadAll(): T[];
    ReadAll(callback: (data: T[]) => void);
    Update(key: K, value: T, callback: () => void);
    Delete(key: K, callback: () => void);
    Keys?(collection: string, callback: (data: string[]) => void);
}

interface IToDoItem {
    text: string;
    checked: boolean;
    key?: string;
    order?: number;
}

Firebase implementation

export namespace Firebase {

    export class TodoCrud implements ICrud<IToDoItem, string> {

element = document.querySelector('signin-provider');
    element.config = firebaseConfig;

signing.addEventListener('click', () => {
        element.signInWithGoogle();
});

crud dependency injection main.ts

todo = document.querySelector('my-todo');

let crud = new Firebase.TodoCrud(0, () => {
      todo.crud = crud; // todo list rendered from list array
   }); 

my-dodo.ts

 set crud(value: ICrud<IToDoItem, number>) {

        this._crud = value;
        this._render();
    }

storage

 <filestorage-provider folder='video' accept='text/*,audio/*,video/*,image/*' inputs='input,textarea'>
    <div id='custommetadata'>
      <div class="item">
        <label for='strd'>Start At</label>
        <input id='strd' type="date" name='startdate'></label>
      </div>
      <div class="item">
        <label for='expd'>Expire At</label>
        <input id='expd' type="date" name='expiredate'>
      </div>
      <div class="item">
        <label for='com'>Comments</label>
        <textarea id='com' name="comments" rows="3" cols="50" placeholder="Add comment"></textarea>
      </div>
    </div>
  </filestorage-provider>

clone metadata inputs child node for each upload item

  const metadata_template = this.querySelector('#custommetadata');
  //metadata template from index.html
    const metadata_node = null;
    if (metadata_template) metadata_node = metadata_template.cloneNode(true);
    else if (this.children[0]) metadata_node = this.children[0].cloneNode(true);
    if (metadata_node) file_list_item_container.appendChild(metadata_node);
    //

//28 April 2020

if (Object.keys(metadata).length > 0) {

   uploadTask = storageRef.child('users/' + user + '/' + this.folder + '/' + file.name).put(file, metadata);
}

//29 April 2020 Create Directory
 $('.mkdir .btn', this.shadowRoot).click(() => {
            var dir = $('#dirname', this.shadowRoot);
            if (!dir.val()) {
                alert('Enter the name of the folder first');
                dir.focus();
                return;
            }
            var file = new File([dir.val().toString()], 'folder.info', {
                type: 'text/plain',
            });

            var user = firebase.auth().currentUser.uid;
            if (!user) return;

            var storageRef = firebase.storage().ref();
            var self = this;
            var uploadTask = storageRef.child('users/' + user + '/' + this.folder + '/' + dir.val() + '/' + file.name).put(file).then(function (snapshot) {
                console.log('Uploaded a blob or file!');
                // todo refresh file list

                self.dispatchEvent(new Event('onchange'));
            });


        });
        // 4 May 2020
        firebase.initializeApp(this.firebaseConfig);
        firebase['initialized'] = true;
        // ...
        whenDefined(firebase, 'initialized', function () {

        });