Avi - Messages (Angular.js)

by mickeyvip

HTML

<link rel="stylesheet" href="http://fortawesome.github.com/Font-Awesome/assets/css/font-awesome.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://raw.github.com/timrwood/moment/2.0.0/min/moment.min.js"></script>
<div ng-controller="MessageController">
    <ul class="message-list">
        <li ng-repeat="message in messages" data-id="{{message.Id}}" ng-class="intermediateState(message)">
            <a href="#" ng-click="toggleMessageText(message)">
                <i ng-class="iconClassName(message)" title="{{message.TypeTitle}}"></i><span>{{message.Subject}}</span>
            </a>
            <i class="icon-remove-circle remove-message" title="Remove Message" ng-click="removeMessage(message)"></i>
            <section ng-show="textVisible(message)">
                <p>{{message.Text}}</p>
                <p class="message-metadata">from <span>{{senderFullName(message)}}</span> on <span>{{messageDate(message)}}</span></p>
            </section>
        </li>
    </ul>
</div>

SCSS

$line-height: 40px;
$text-color: #777;

body {
    font-family: Arial, Sans-Serif;
    font-size: 1em;
    color: $text-color;
}

.intermediate {
    opacity: 0.3;
}

.message-list {
    font-family: Arial, Sans-Serif;
    font-size: 0.9em;
    list-style: none;
    width: 300px;
    
    li {
        border: 1px solid #bbb;
        margin-top: -1px;
        position: relative;
        a {
            color: $text-color;
            text-decoration: none;
            display: block;
            line-height: $line-height;
            padding: 0 10px;
            margin-right: 20px;
            span {
                margin-left: 15px;
            }
        }
        .remove-message {
            position: absolute;
            right: 0;
            top: 0;
            line-height: $line-height;
            cursor: pointer;
        }
        section {
            border-top: 1px solid #ddd;
            background-color: #eee;
                
            p {
                margin: 0;
                padding: 8px;
            }
            
            .message-metadata {
                font-size: 0.8em;
                text-align: right;
                
                span {
                    font-weight: bold;
                }
            }
        }
    }
}

JavaScript

// this is the real raw data returned from the server
var messagesResponseJSON = [{"Id":"e85134d4-f8ca-4a1d-ba0e-34677cc5b951","Date":"2013-01-01T00:00:00","Subject":"Please pay the bill","Text":"i think you still own me money","CreatorId":6,"MessageStatus":1,"ReminderDate":"2013-03-04T15:01:31.503","StatusId":1,"TypeId":1,"TypeTitle":"message","Email":"[email protected]","FirstName":"John","LastName":"Doe","Phone":"0215488775"},{"Id":"e85134d4-f8ca-4a1d-ba0e-34677cc5b954","Date":"2012-11-11T00:00:00","Subject":"SubjectTest","Text":"Message Text","CreatorId":7,"MessageStatus":1,"ReminderDate":"2012-11-13T00:00:00","StatusId":1,"TypeId":1,"TypeTitle":"message","Email":"[email protected]","FirstName":"xxx","LastName":"yyy","Phone":"1700780787"},{"Id":"f3c3eb47-f1e7-4d63-bd75-fe4fc92261f0","Date":"2012-11-11T00:00:00","Subject":"SubjectTest1","Text":"MsgText1","CreatorId":7,"MessageStatus":2,"ReminderDate":"2012-12-13T00:00:00","StatusId":2,"TypeId":2,"TypeTitle":"payment","Email":"[email protected]","FirstName":"xxx","LastName":"yyy","Phone":"1700780787"}];

var app = angular.module("myApp", []);
/*
    a small DB-Server for manipulating/fetching server data
*/
app.factory("MessagesDb", function ($timeout) {
    return {
        // loads all the messages from the server
        load: function() {
            var d = $.Deferred();
            
            // simulating server call
            // $.get("/messages")
            $timeout(function () {
                d.resolve(messagesResponseJSON);
                // for testing failure fetching messages comment previous line and uncomment next
                // d.reject("The messages could not be retrieved");
            }, 1500);
            
            return d.promise();
        },
        // deletes message with passed in "id" on the server
        delete: function (id) {
            var d = $.Deferred();
            
            // simulating server call
            // $.post("/messages/delete/:id")
            //...